Web - Chat - When editing last message, edition composer is cutted in half by main composer

lanitochka17 commented 1 day ago

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.40-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/5006320&group_by=cases:section_id&group_order=asc&group_id=292106 Issue reported by: Applause - Internal Team

Action Performed:

Open the staging.new.expensify.com website
Open any chat with long history 3.Right click on the last sent message
Click on "Edit Message
Verify the edition composer, is fully visible

Expected Result:

When editing the last sent message on a chat, the edition composer, should be fully visible

Actual Result:

When the user edits the last message on a chat with long history, the edition composer, gets cutted in half by the main compose box

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/cc504784-8b07-4252-bd57-74e24c994df5

View all open jobs on GitHub

melvin-bot[bot] commented 1 day ago

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

lanitochka17 commented 1 day ago

@VictoriaExpensify 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

MuaazArshad commented 1 day ago

Proposal

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

Web - Chat - When editing last message, edition composer is cutted in half by main composer

What is the root cause of that problem?

We are currently using the built-in View component from React Native here. https://github.com/Expensify/App/blob/b9f8b86ef5c3034c1387fa6c636b071bdaf3092e/src/pages/home/report/ReportActionItemMessageEdit.tsx#L499-L552

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

We should use ScrollView to ensure proper scrolling behaviour. Sudo Code:

                <ScrollView style={[StyleUtils.getContainerComposeStyles(), styles.textInputComposeBorder]}>
                        //.......
                    </ScrollView>

What alternative solutions did you explore? (Optional)

daledah commented 1 day ago

Proposal

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

When the user edits the last message on a chat with long history, the edition composer, gets cutted in half by the main compose box

What is the root cause of that problem?

We already had the logic to focus on the edit composer in

https://github.com/Expensify/App/blob/2e212037b3e95ceb10f83d3d92f598fe87183627/src/pages/home/report/ReportActionItem.tsx#L267

Even though, we use focusComposerWithDelay within shouldDelay: true but it just check the ComposerFocusManager.isReadyToFocus() and isWindowReadyToFocus()

https://github.com/Expensify/App/blob/2e212037b3e95ceb10f83d3d92f598fe87183627/src/libs/focusComposerWithDelay/index.ts#L30

When the input is focus, the view automatically scrolls to that input, but we need to wait for composer edit animation end before focusing on the input. We did the same in many places, especially in useAutoFocusInput hook

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

Update this line

to

setTimeout(()=>{
            focusComposerWithDelay(textInputRef.current)(true);
        },CONST.ANIMATED_TRANSITION)

What alternative solutions did you explore? (Optional)

We can delay focus in focusComposerWithDelay if shouldDelay is true

Result

https://github.com/user-attachments/assets/636b293e-e553-4b62-8c6e-9719d445ba8c

Expensify / App