[HOLD for Payment 2024-09-23][$100] Web - Chat - New line added when selecting "Edit comment" with arrow and enter key

[IuliiaHerets]

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: v9.0.28-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/4912531
Email or phone of affected tester (no customers): applausetester+vd_web090224@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Go to any chat with messages (or send some messages).
3. Right click on any message.
4. Click on "Edit comment".
5. Note that the cursor is at the end of the message.
6. Cancel the edit.
7. Right click on the message.
8. With the arrows and enter keys, select "Edit comment".
9. Note that a new line is added, cursor is on a new line.

Expected Result:

No new line should be added when selecting "Edit comment" with arrows and enter keys.

Actual Result:

A new line is added when selecting "Edit comment" with arrows and enter keys.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6591267_1725326496779.bandicam_2024-09-02_21-20-31-104.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021831491720281537308
• Upwork Job ID: 1831491720281537308
• Last Price Increase: 2024-09-05

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

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

[IuliiaHerets]

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

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-03 11:12:31 UTC.

Proposal

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

When pressing the "Edit" option in the context menu for a report action, the Enter key press propagates to the compose box, resulting in a new line being inadvertently inserted. This behavior is unintended and disrupts the editing flow.

What is the root cause of that problem?

The root cause is that the Enter key press used to select the "Edit" option in the context menu propagates to the compose box, causing it to register as an input and insert a new line.

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Lines 255 to 259 in e1a886e

	if (closePopover) {
	// Hide popover, then call editAction
	hideContextMenu(false, editAction);
	return;
	}

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

We should use InteractionManager.runAfterInteractions to ensure that the edit action is only triggered after all interactions, including the closing of the context menu, have fully completed. This will prevent the Enter key press from propagating to the compose box and inserting an unwanted new line.

hideContextMenu(false, InteractionManager.runAfterInteractions(() => editAction()));

or we can add this InteractionManager.runAfterInteractions when calling the callback value in the hideContextMenu itself

POC

Screen.Recording.2024-09-03.at.13.14.54.mov

What alternative solutions did you explore? (Optional)

• an alternative solution is to use preventDefault on the enter event
  this can be done by changing preventDefault to true however this will bring the following regression
• so i suggest to add a new prop (shouldPreventDefault) in the context actions where if this value is passed then use it if not the default is false
• and pass this value as true in the editAction context and any other context if needed.

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-03 11:27:53 UTC.

Proposal


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

Web - Chat - New line added when selecting "Edit comment" with arrow and enter key

What is the root cause of that problem?

shouldPreventDefault is set to false when subscribing to enter key press.

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Lines 245 to 261 in 4fe86eb

	useKeyboardShortcut(
	CONST.KEYBOARD_SHORTCUTS.ENTER,
	(event) => {
	if (!menuItemRefs.current[focusedIndex]) {
	return;
	}
	// Ensures the event does not cause side-effects beyond the context menu, e.g. when an outside element is focused
	if (event) {
	event.stopPropagation();
	}
	menuItemRefs.current[focusedIndex]?.triggerPressAndUpdateSuccess?.();
	setFocusedIndex(-1);
	},
	{isActive: shouldEnableArrowNavigation, shouldPreventDefault: false},
	);

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


Update shouldPreventDefault to true.

What alternative solutions did you explore? (Optional)

We can call event?.preventDefault(); inside the callback function because shouldPreventDefault: false was added in the config to add the emojis on keypress. I also think that we can remove event.stopPropagation(); from the callback if we are adding event?.preventDefault();.

Result

[Krishna2323]

Proposal Updated

• Added alternative

[abzokhattab]

Proposal updated

added an alternative proposal

[bernhardoj]

Proposal

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

New line is added when we edit a message using keyboard ENTER.

What is the root cause of that problem?

In the context menu component, we have an ENTER keyboard shortcut that will open the edit composer.

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx

Lines 245 to 261 in aa69371

	useKeyboardShortcut(
	CONST.KEYBOARD_SHORTCUTS.ENTER,
	(event) => {
	if (!menuItemRefs.current[focusedIndex]) {
	return;
	}
	// Ensures the event does not cause side-effects beyond the context menu, e.g. when an outside element is focused
	if (event) {
	event.stopPropagation();
	}
	menuItemRefs.current[focusedIndex]?.triggerPressAndUpdateSuccess?.();
	setFocusedIndex(-1);
	},
	{isActive: shouldEnableArrowNavigation, shouldPreventDefault: false},
	);

Because the context menu option is focused, pressing ENTER will also by default trigger the element onPress which will open the edit composer. But because it's already handled by the ENTER keyboard shortcut, the enter event is captured by the edit composer which adds the unexpected new line.

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

Enable the ENTER shortcut for native only. We don't need the ENTER shortcut for the web because the item is focused when we navigate using the arrow key.

[adelekennedy]

I can reproduce - however this seems like a pretty small bug to me so I'm reducing the bounty
https://github.com/user-attachments/assets/16189b95-d7a1-4433-8ad7-ea81ca3ebf59

[melvin-bot]

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