[HOLD for payment 2024-12-07] [$250] The up-to-edit feature doesn't work when the message contains an embedded image.

[m-natarajan]

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.59-3
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Navigate to any chat
2. Compose any message and add a attachment
3. Send the message
4. Press the up arrow on the keyboard to edit

Expected Result:

User able to edit the sent message

Actual Result:

Up to edit feature doesn't work

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.737.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021856262688043659757
• Upwork Job ID: 1856262688043659757
• Last Price Increase: 2024-11-12
• Automatic offers:
• daledah | Contributor | 104956482

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2024-11-14 08:30:02 UTC.

Proposal

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

When the last message sent in a chat includes an attachment, pressing the ArrowUp key does not open the edit box, preventing the user from editing that message

What is the root cause of that problem?

When a message with an attachment is sent, the selection.start value is set to the length of the text in that message. Because of this, the condition in the code that triggers the edit box doesn’t pass, which is why the edit box isn’t activated.
hence this condition will be false:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 482 in 9d8571b

if (webEvent.key === CONST.KEYBOARD_SHORTCUTS.ARROW_UP.shortcutKey && selection.start <= 0 && isEmptyComment && !includeChronos) {

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

when we send the comment without or without attachment, this onClear, is called.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 700 in be4d7f5

const onClear = useCallback(

we can set the selection.start to 0 as :
setSelection({ start: 0, end: 0 });
in this part:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 514 to 519 in be4d7f5

	if (!textInputRef.current?.isFocused()) {
	return;
	}
	suggestionsRef.current?.onSelectionChange?.(e);
	setSelection(e.nativeEvent.selection);

the setSelection(e.nativeEvent.selection), won't be executed as the !textInputRef.current?.isFocused(), will be true in the case of sending attachment.

and just to not re-rerun this setSelection({ start: 0, end: 0 }); on the onClear function twice for a text only message, we can add check if the selection.start !== 0.

if(selection.start !== 0){
setSelection({ start: 0, end: 0 });
}

or

if(!textInputRef.current?.isFocused()){
setSelection({ start: 0, end: 0 });
}

The setSelection({ start: 0, end: 0 }); is also being called in the Composer component’s clear function
here:

App/src/components/Composer/implementation/index.tsx

Line 278 in e6b4167

setSelection({start: 0, end: 0});

clear function in Composer component is triggered for all messages, regardless of whether they include attachments or are text-only.

App/src/components/Composer/implementation/index.tsx

Line 278 in e6b4167

setSelection({start: 0, end: 0});

In clear, setSelection({ start: 0, end: 0 }) is called to reset the selection, but it only updates the local state selection within the Composer component. Since this reset is only applied to Composer's own internal selection state, it doesn’t affect the selection state in ComposerWithSuggestions.

App/src/components/Composer/implementation/index.tsx

Lines 63 to 68 in 04402e9

	const [selection, setSelection] = useState<
	| {
	start: number;
	end?: number;
	positionX?: number;
	positionY?: number;

In ComposerWithSuggestions, we maintain a separate local selection state using which we decide to open the comment edit box if the selection.start <=0,

App/src/components/Composer/implementation/index.tsx

Line 63 in e6b4167

const [selection, setSelection] = useState<

This means the selection reset on clear in Composer doesn’t propagate to ComposerWithSuggestions, which is why we need to explicitly update the selection state of ComposerWithSuggestions in the onClear:

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 700 in be4d7f5

const onClear = useCallback(

[jliexpensify]

@Expensify/design before I make this External, do you want to review this thread and weigh in and confirm this is something we want to change? Shawn has shared thoughts here already. Thanks!

[daledah]

Edited by proposal-police: This proposal was edited at 2024-11-12 04:40:00 UTC.

Proposal

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

Up to edit feature doesn't work

What is the root cause of that problem?

When users send the message along with image, the selection should be reset to 0 (same as what we send the message only).

But we prevent to update selection if the text input is not focused, in case users send message + image, the image modal preview will show that makes the composer is blurred

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 512 to 522 in 64cb4ee

	const onSelectionChange = useCallback(
	(e: CustomSelectionChangeEvent) => {
	if (!textInputRef.current?.isFocused()) {
	return;
	}
	suggestionsRef.current?.onSelectionChange?.(e);
	setSelection(e.nativeEvent.selection);
	},
	[suggestionsRef],
	);

=> the selection is not reset to 0, then the logic up-to-edit is not triggered

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 482 in 9d8571b

if (webEvent.key === CONST.KEYBOARD_SHORTCUTS.ARROW_UP.shortcutKey && selection.start <= 0 && isEmptyComment && !includeChronos) {

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

We should prevent suggestionsRef.current?.onSelectionChange?.(e); when the input is not focused only, since the selection is changed actually -> it should be updated

            setSelection(e.nativeEvent.selection);

            if (!textInputRef.current?.isFocused()) {
                return;
            }
            suggestionsRef.current?.onSelectionChange?.(e);

What alternative solutions did you explore? (Optional)

We can force update the selection in clear function.

Pass clear flag param in

App/src/components/Composer/implementation/index.tsx

Line 277 in 64cb4ee

onSelectionChange(selectionEvent);

Then use this flag to force update selection in

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 512 in 64cb4ee

const onSelectionChange = useCallback(

[shawnborton]

I think it makes sense to fix this, yes. Basically whether a message has an image or not shouldn't change your ability to hit the up arrow to quickly edit it.

[melvin-bot]

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

[jliexpensify]

Ty Shawn, lets do it!

[melvin-bot]

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