[$250] Web - Chat - When editing last message, edition composer is cut in half by main composer

[lanitochka17]

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.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:

1. Open the staging.new.expensify.com website
2. Open any chat with long history
   3.Right click on the last sent message
3. Click on "Edit Message
4. 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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6615545_1727314558189.Cut_compose.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843415078855833463
• Upwork Job ID: 1843415078855833463
• Last Price Increase: 2024-11-18

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

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]

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

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.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 499 to 552 in b9f8b86

	<View style={[StyleUtils.getContainerComposeStyles(), styles.textInputComposeBorder]}>
	<Composer
	multiline
	ref={(el: TextInput & HTMLTextAreaElement) => {
	textInputRef.current = el;
	if (typeof forwardedRef === 'function') {
	forwardedRef(el);
	} else if (forwardedRef) {
	// eslint-disable-next-line no-param-reassign
	forwardedRef.current = el;
	}
	}}
	id={messageEditInput}
	onChangeText={updateDraft} // Debounced saveDraftComment
	onKeyPress={triggerSaveOrCancel}
	value={draft}
	maxLines={shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has
	style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
	onFocus={() => {
	setIsFocused(true);
	InteractionManager.runAfterInteractions(() => {
	requestAnimationFrame(() => {
	reportScrollManager.scrollToIndex(index, true);
	});
	});
	setShouldShowComposeInputKeyboardAware(false);
	// The last composer that had focus should re-gain focus
	setUpComposeFocusManager();
	// Clear active report action when another action gets focused
	if (!EmojiPickerAction.isActive(action.reportActionID)) {
	EmojiPickerAction.clearActive();
	}
	if (!ReportActionContextMenu.isActiveReportAction(action.reportActionID)) {
	ReportActionContextMenu.clearActiveReportAction();
	}
	}}
	onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
	setIsFocused(false);
	const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if ((relatedTargetId && [messageEditInput, emojiButtonID].includes(relatedTargetId)) || EmojiPickerAction.isEmojiPickerVisible()) {
	return;
	}
	setShouldShowComposeInputKeyboardAware(true);
	}}
	onLayout={reportActionItemEventHandler.handleComposerLayoutChange(reportScrollManager, index)}
	selection={selection}
	onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
	isGroupPolicyReport={isGroupPolicyReport}
	shouldCalculateCaretPosition
	onScroll={onSaveScrollAndHideSuggestionMenu}
	/>
	</View>

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]

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

App/src/pages/home/report/ReportActionItem.tsx

Line 267 in 2e21203

focusComposerWithDelay(textInputRef.current)(true);

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

App/src/libs/focusComposerWithDelay/index.ts

Line 30 in 2e21203

Promise.all([ComposerFocusManager.isReadyToFocus(), isWindowReadyToFocus()]).then(() => {

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

Screen.Recording.2024-09-26.at.22.45.30.mov

[VictoriaExpensify]

I haven't had a chance to look at this yet, will take a look tomorrow

[VictoriaExpensify]

Unable to reproduce this issue:

[VictoriaExpensify]

@MuaazArshad - were you able to reproduce this?

[VictoriaExpensify]

asking for a re-test https://expensify.slack.com/archives/C9YU7BX5M/p1727935116718019

[MuaazArshad]

@MuaazArshad - were you able to reproduce this?

Yes, and still reproducible.

Screen.Recording.2024-10-03.at.5.41.24.PM.mov

[m-natarajan]

Able to reproduce

screen-20241004-104821.mp4

[melvin-bot]

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

[melvin-bot]

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

[melvin-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]

@abdulrahuman5196, @VictoriaExpensify Huh... This is 4 days overdue. Who can take care of this?

[wildan-m]

Proposal

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

When editing the last message in the web chat, the edition composer is cut in half by the main composer.

What is the root cause of that problem?

When we press edit, the offset position of scroll is not perfectly pointed to the reportAction item, since the ReportActionItem and ReportActionItemMessageEdit might have different height this make the editor position might a little cut.

I can consistently reproduce the issue with the following step

1. Open the app
2. Create a message with 2 or more lines
3. Scroll to the top of text ensure 2nd and the last message content hidden
4. Right click on the last sent message
5. Click on "Edit Message

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

To ensure proper offset position while editing, scroll to the start of the edited report action when it's the last report action. It may be necessary to remove index === 0 based on the desired outcome.

Modify this useEffect

App/src/pages/home/report/ReportActionItem.tsx

Lines 267 to 273 in db592c9

	useEffect(() => {
	if (prevDraftMessage !== undefined || draftMessage === undefined) {
	return;
	}
	focusComposerWithDelay(textInputRef.current)(true);
	}, [prevDraftMessage, draftMessage]);

To

    useEffect(() => {
        if (prevDraftMessage !== undefined || draftMessage === undefined) {
            return;
        }

        if(index === 0)
        {
            InteractionManager.runAfterInteractions(() => {
                requestAnimationFrame(() => {
                    reportScrollManager.scrollToIndex(index);
                });
            })
        }

        focusComposerWithDelay(textInputRef.current)(true);
    }, [prevDraftMessage, draftMessage]);

Ensure proper scrolling functionality by using runAfterInteractions and requestAnimationFrame, which are also utilized in other sections.

Result -- Before(left) - After(Right)

Kapture.2024-10-29.at.13.23.51.mp4

Branch for this solution

What alternative solutions did you explore? (Optional)

N/A

[wildan-m]

I am unable to reproduce this issue. Any way to reproduce this reliabily?

@abdulrahuman5196 you might find the answer in my proposal #49787 (comment)

[VictoriaExpensify]

I haven't been able to reproduce the issue. Applying the retest label

[wildan-m]

@VictoriaExpensify can you test with this reproduction steps?

I can consistently reproduce the issue with the following step

1. Open the app
2. Create a message with 2 or more lines
3. Scroll to the top of text ensure 2nd and the last message content hidden
4. Right click on the last sent message
5. Click on "Edit Message

Reproduction video and result can be seen here #49787 (comment)

[MuaazArshad]

Able to reproduce using the provided steps.

Screen.Recording.2024-10-30.at.6.08.24.PM.mov

[melvin-bot]

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

[melvin-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]

@abdulrahuman5196, @VictoriaExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@abdulrahuman5196, @VictoriaExpensify 12 days overdue. Walking. Toward. The. Light...

[melvin-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]

@abdulrahuman5196, @VictoriaExpensify 12 days overdue. Walking. Toward. The. Light...

[VictoriaExpensify]

Yup, this is reproducible following the steps given. Let's move forward here

[abdulrahuman5196]

Hi, I am still unable to repro the issue. I reached out in C+ channel to see if any one is able to repro this and takeover.
https://expensify.slack.com/archives/C02NK2DQWUX/p1731523034411719

[allroundexperts]

I was able to reproduce. Will post a video shortly as well.

[allroundexperts]

Was able to reproduce:

Screen.Recording.2024-11-14.at.3.25.31.AM.mov

[allroundexperts]

@VictoriaExpensify Can you please assign this to me?

[abdulrahuman5196]

@VictoriaExpensify Kindly assign this issue to @allroundexperts for takeover. Unassigned myself.

[melvin-bot]

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

[melvin-bot]

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