[HOLD for payment 2024-12-16] [$250] Chat - Compose box stays in the middle when reduced with a several lines message

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.39-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Open the staging.new.expensify.com website.
2. Open any chat.
3. On compose box, start writing a message adding new lines until a scrollbar can be seen.
4. Tap on the "Expand" button.
5. Keep adding lines to the message until a scrollbar can also be seen with the compose box expanded.
6. Reduce the compose box size.
7. Verify if you are scrolled to the bottom when the compose box is reduced.

Expected Result:

When the compose box with a written message of several lines is reduced in size, the user should be scrolled to the bottom of it.

Actual Result:

When the compose box with a written message of several lines is reduced in size, the user is not scrolled to the bottom. The compose box is displayed in the middle of the message.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6609918_1726836461310.Compose_Reduce.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838742813045152105
• Upwork Job ID: 1838742813045152105
• Last Price Increase: 2024-10-02
• Automatic offers:
• rayane-djouah | Reviewer | 104312306
• FitseTLT | Contributor | 104312308

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@anmurali FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[FitseTLT]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Chat - Compose box stays in the middle when reduced with a several lines message

What is the root cause of that problem?

When we toggle isComposerFullSize there is a code that sets the scrollTop to the previous scrollTop (the scrollTop in the previous isComposerFullSize state)

App/src/components/Composer/index.tsx

Lines 268 to 271 in 25450d9

	// eslint-disable-next-line react-compiler/react-compiler
	textInput.current.scrollTop = prevScroll;
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isComposerFullSize]);

so when the when the composer was full size the scroll top had a smaller value (that is because the composer had greater height and needs to scroll with smaller value to show the bottom of the composer than when it is non-full size) so when we switch it to non-full size that small value of scrollTop will not be enough to show the bottom of the composer.

What changes do you think we should make in order to solve the problem?

We need to set the scrollTop in such a way that the content on the bottom of the composer will be persitent on toggling isComposerFullSize so: we should add height state to hold previous clientHeight the change

App/src/components/Composer/index.tsx

Line 232 in 25450d9

setPrevScroll(textInput.current.scrollTop);

            setPrevScroll(textInput.current.scrollTop);
            setPrevHeight(textInput.current.clientHeight);

App/src/components/Composer/index.tsx

Lines 268 to 271 in 25450d9

	// eslint-disable-next-line react-compiler/react-compiler
	textInput.current.scrollTop = prevScroll;
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [isComposerFullSize]);

 if (!textInput.current || prevScroll === undefined || prevHeight === undefined) {
            return;
        }
        // eslint-disable-next-line react-compiler/react-compiler
        textInput.current.scrollTop = prevScroll + prevHeight - textInput.current.clientHeight;
       

What alternative solutions did you explore? (Optional)

We if we want the center of the content persistent we can change

        textInput.current.scrollTop = prevScroll + prevHeight / 2 - textInput.current.clientHeight / 2 ;

[melvin-bot]

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021838742813045152105

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)