-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$250] mWeb/Chrome -Chat - When adding emoji in multiline message composer is not completelly autoscrolled #50174
Comments
Triggered auto assignment to @OfstadC ( |
@OfstadC 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 |
I tested this end of last week and then got side tracked. Reviewing again |
i believe this is ND Quality - posted in Slack to confirm |
Job added to Upwork: https://www.upwork.com/jobs/~021843658720204692310 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt ( |
Hello, I'm Michał from SWM, an expert agency, and I will investigate this issue |
Hello, I've investigated this topic, and two problems are causing this issue. The first is connected to our current scroll-into-view logic inside the Live Markdown library. When trying to insert the emoji from the modal, we add the emoji and the space after it to the input value. Because of this space, the target element for scrolling-into-view is the text node, which has a different line height than the emoji. To fix it, we can take the parent line element and scroll the view into it. Also, we can use the #45885 (comment) fix and add some bottom padding on the scroll, like 4px. The second problem is connected to default text input behavior. By default, HTML input/text area elements don't include padding at the bottom when scrolling text into view. The same happens in the native RN TextInput component. Because of that, the input isn't scrolled fully to the bottom when inserting the new line and adding text there. VideoScreen.Recording.2024-10-08.at.18.39.50.movBecause of that, I think we shouldn't care about scrolling the input fully to the bottom because it's the default input behavior. Instead, let's focus on scrolling input so emojis in the line don't overlap in every scenario. What are your thoughts on this? |
Here is a PR with the fix |
PR still under review |
Expensify/react-native-live-markdown#514 is merged. Waiting on the App PR for the upgrade |
@Skalakid Do you have an ETA for the E/App PR? |
Hi, sorry I had to prioritize other tasks and didn't have time to do it. Creating the PR with a bump right now |
Here is the PR |
Triggered auto assignment to @nkuoch, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 9.0.44-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5043700&group_by=cases:section_id&group_order=asc&group_id=306201
Issue reported by: Applause - Internal Team
Action Performed:
Expected Result:
When adding an emoji in a multiline message, the compose box should be scrolled to the bottom so the emoji is not overlapped
Actual Result:
When the scrollbar is displayed in a multiline message and the user adds an emoji in a new line, the compose box is not autoscrolled to the bottom and the emoji is overlapped until the user scrolls down
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Bug6623459_1727975277132.Multiemoji.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @s77rtThe text was updated successfully, but these errors were encountered: