Repository navigation
[HOLD for payment 2024-12-16] [$250] Chat - Compose box stays in the middle when reduced with a several lines message #49541
Description
Activity
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.We think that this bug might be related to #wave-collect - Release 1
@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
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
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); setPrevHeight(textInput.current.clientHeight);App/src/components/Composer/index.tsx
Lines 268 to 271 in 25450d9
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 ;Reacted by rayane-d@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
- changed the title
[-]Chat - Compose box stays in the middle when reduced with a several lines message[/-][+][$250] Chat - Compose box stays in the middle when reduced with a several lines message[/+]on Sep 25, 2024 Job added to Upwork: https://www.upwork.com/jobs/~021838742813045152105
Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (
External)54 remaining items
- changed the title
[-][$250] Chat - Compose box stays in the middle when reduced with a several lines message[/-][+][HOLD for payment 2024-12-16] [$250] Chat - Compose box stays in the middle when reduced with a several lines message[/+]on Dec 9, 2024 Reviewinglabel has been removed, please complete the "BugZero Checklist".The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.72-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2024-12-16. 🎊
For reference, here are some details about the assignees on this issue:
- @FitseTLT requires payment automatic offer (Contributor)
- @rayane-djouah requires payment automatic offer (Reviewer)
@rayane-djouah @JmillsExpensify @rayane-djouah The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]
BugZero Checklist:
-
Classify the bug:
Bug classification
Source of bug:
- 1a. Result of the original design (eg. a case wasn't considered)
- 1b. Mistake during implementation
- 1c. Backend bug
- 1z. Other:
Where bug was reported:
- 2a. Reported on production
- 2b. Reported on staging (deploy blocker)
- 2c. Reported on a PR
- 2z. Other:
Who reported the bug:
- 3a. Expensify user
- 3b. Expensify employee
- 3c. Contributor
- 3d. QA
- 3z. Other:
-
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.
Link to comment: https://github.com/Expensify/App/pull/38152/files#r1877946164
-
If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.
Link to discussion: N/A
-
If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
-
[@JmillsExpensify] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.
Link to issue:
Regression Test Proposal
#### Precondition: - N/A #### Test: 1. Open any chat. 2. In the compose box, start typing a message. Keep adding new lines until a scrollbar appears. 3. Tap on the "Expand" button to enlarge the compose box. 4. Continue adding lines to the message until a scrollbar appears again with the expanded compose box. 5. Reduce the size of the compose box. 6. Verify that the scroll position has followed the bottom of the compose bar.Do we agree 👍 or 👎
-
Payment summary:
- Contributor: $250 @FitseTLT
- Reviewer: $250 @rayane-djouah
Contributors paid out and regression test created, so I'm closing this one.
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:
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:
Screenshots/Videos
Bug6609918_1726836461310.Compose_Reduce.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @JmillsExpensify