[$250] Chat - Compose box is hidden when editing multiple line break message

[izarutskaya]

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: v1.4.64-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/4503695 Email or phone of affected tester (no customers): [email protected] Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

Pre-requisite: user must be logged in.

1. Go to any chat.
2. Send a message with 10 line breaks.
3. Tap and hold on the recently sent message.
4. Tap on "Edit comment".
5. Verify the compose box is partially hidden, the chat does not auto-scroll to the bottom.

Expected Result:

The page should auto-scroll to the bottom and the compose box should be fully visible without manual scroll.

Actual Result:

The page is not auto-scrolled to the bottom, the compose box is partially hidden, manual scroll is required.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [x] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/115492554/b77f87b4-a964-4ebe-99c5-b41fdbde7b72

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0179a22c17165154c1
• Upwork Job ID: 1782955414960959488
• Last Price Increase: 2024-04-24

[melvin-bot[bot]]

Triggered auto assignment to @trjExpensify (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.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[trjExpensify]

I can reproduce it. Couldn't find a recent issue, looks like @kosmydel fixed it once before here in Oct 2023: https://github.com/Expensify/App/pull/24502

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[suneox]

Proposal

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

Chat - Compose box is hidden when editing multiple line break message

What is the root cause of that problem?

When editing a message item on report item list will be focus and scrollToIndex immediate, but the keyboard shown 100% after the list item scrollToIndex and the height of report item will resize to smaller so the keyboard will overlap the edit composer

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

We will be waiting the keyboard open 100% before scrollToIndex. We can use InteractionManager.runAfterInteractions and requestAnimationFrame to wait the keyboard opened then scroll to index Update onFocus function to

    onFocus={() => {
        setIsFocused(true);
+       InteractionManager.runAfterInteractions(() => {
+           requestAnimationFrame(() => {
                reportScrollManager.scrollToIndex(index, true);
+           });
+       });
        setShouldShowComposeInputKeyboardAware(false);
        ...

Same solution with this and this

Before fix

https://github.com/Expensify/App/assets/11959869/c25cd525-fd56-4a93-957d-83259ccca7d1

After fix

https://github.com/Expensify/App/assets/11959869/4814cedb-6e58-4b2d-8ed2-654e2eec81a7

What alternative solutions did you explore? (Optional)

[suneox]

I can reproduce it. Couldn't find a recent issue, looks like @kosmydel fixed it once before here in Oct 2023: #24502

@trjExpensify This issue still happens when you edit the last item has multiple lines

https://github.com/Expensify/App/assets/11959869/c25cd525-fd56-4a93-957d-83259ccca7d1

[tienifr]

Proposal

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

The page is not auto-scrolled to the bottom, the compose box is partially hidden, manual scroll is required.

What is the root cause of that problem?

We're running scrollToIndex right after the edit composer is focused. At that time, the keyboard is still showing and when it 's shown totally, the keyboard will be overlap with the composer

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

We need to wait for keyboard is shown totally. To do that we shouldn't lean on runAfterInteractions or requestAnimationFrame because they're not enough to make sure the keyboard is shown 100%. Instead of that we should use keyboardDidShow event

const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
                                    reportScrollManager.scrollToIndex(index, true);
                                    keyboardDidShowListener.remove()
                                });

What alternative solutions did you explore? (Optional)

NA

Result

https://github.com/Expensify/App/assets/113963320/f7159e42-7cb3-47d0-a5ad-9a928c64db36

[kosmydel]

I can reproduce it. Couldn't find a recent issue, looks like @kosmydel fixed it once before here in Oct 2023: #24502

The mentioned issue was related to mWeb only, not native. At first glance, the root cause of this issue is different.

[suneox]

I think the RCA and solution on this proposal is inherited and duplicated with my proposal is we have to wait keyboard show

however, my chosen option for solution wait keyboard show based on a lot of code base also use runAfterInteractions to allows JavaScript animations to run smoothly avoid many transitions run the same time, and the event keyboardDidShow doesn't support for mWeb

[tienifr]

https://github.com/Expensify/App/assets/113963320/7195a977-1acd-45e5-a2b6-f0dbbb2ba546

It works well on mweb. As I said in my proposal, runAfterInteractions can not make sure the keyboard is shown totally

[suneox]

react-native-web doesn't implement Keyboard event

I have tried keyboard event before using runAfterInteractions and it doesn't work for mWeb

https://github.com/Expensify/App/assets/11959869/0734d1d8-55a8-44da-9984-5a2fea5aca27

My solution using runAfterInteractions for scroll to item the same with this one, this one ... and flatlist also apply requestAnimationFrame for scroll to item that all the reason i using runAfterInteractions and requestAnimationFrame to make sure no frame update that also mean the keyboard opened it also avoid multiple transition run same time

[sword1202]

If there is multi lines text, it's impossible to edit on iPhone.

https://github.com/Expensify/App/assets/23204263/ddc288c3-d9b0-44b5-8633-e7d413762a63

[trjExpensify]

@rojiphil are you going to review these proposals?

[rojiphil]

@rojiphil are you going to review these proposals?

@trjExpensify Yes. Will review and share an update today.

[rojiphil]

react-native-web doesn't implement Keyboard event

@tienifr What are your thoughts on this concern?

[rojiphil]

runAfterInteractions can not make sure the keyboard is shown totally

@suneox And what are your thoughts on this concern?

[suneox]

@suneox And what are your thoughts on this concern?

@rojiphil I also explain in my comment the reason I was using runAfterInteractions with requestAnimationFrame to make sure it can work for all platform instead of the keyboard even.

My solution using runAfterInteractions for scroll to item the same with this one, this one ... and flatlist also apply requestAnimationFrame for scroll to item that all the reason i using runAfterInteractions and requestAnimationFrame to make sure no frame update that also mean the keyboard opened it also avoid multiple transition run same time

[rojiphil]

@suneox @tienifr On further investigation, I could reproduce the problem even without the keyboard on my iOS simulator. So how can scrolling early even before the Keyboard shows up completely be the root cause here?

https://github.com/Expensify/App/assets/3004659/12efd46d-3050-4962-a7d4-eb264fad34be

[suneox]

@suneox @tienifr On further investigation, I could reproduce the problem even without the keyboard on my iOS simulator. So how can scrolling early even before the Keyboard shows up completely be the root cause here?

https://github.com/Expensify/App/assets/3004659/12efd46d-3050-4962-a7d4-eb264fad34be

You must enable keyboard by shortcut CMD+k

[rojiphil]

You must enable keyboard by shortcut CMD+k

I did not intend to enable the keyboard here. What I am emphasising is that the scroll issue exists even without the keyboard. So, it seems almost certain that using keyboardDidShow will not resolve the issue. Regarding usage of runAfterInteractions and requestAnimationFrame, I am open to considering this as an option if there is a solid reasoning behind this. Until then we are attempting to resolve this by introducing a delay and that is not guaranteed to be enough all the time.

So I still think there is more to the RCA than what we have found until now.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@rojiphil, @trjExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[suneox]

Regarding usage of runAfterInteractions and requestAnimationFrame, I am open to considering this as an option if there is a solid reasoning behind this. Until then we are attempting to resolve this by introducing a delay and that is not guaranteed to be enough all the time.

@rojiphil I think I have pointed out the reason i'm using these attributes based on a lot of places that also use it.

So I still think there is more to the RCA than what we have found until now.

I only see the issue on your video is multiple transitions run at the same time and InteractionManager allows long-running work to be scheduled after any interactions/animations have completed and it also works for all platforms

[melvin-bot[bot]]

@rojiphil @trjExpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

@rojiphil, @trjExpensify Still overdue 6 days?! Let's take care of this!

[trjExpensify]

@rojiphil any feedback on this?

[melvin-bot[bot]]

@rojiphil @trjExpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[rojiphil]

I think I have pointed out the reason i'm using these attributes based on a lot of places that also use it.

Just because it is used elsewhere does not necessarily mean we can use it here too. So I am still not convinced of the reasoning here.

[rojiphil]

This issue still happens when you edit the last item has multiple lines

@suneox As I understand from your comment here, this problem happens only for the last item. So, why is this problem not observed for non-last items? Non-last items does not seem to need the support of runAfterInteractions and requestAnimationFrame to display edit box completely.