[HOLD for payment 2024-08-13] [$250] Context menu - Unable to add reaction by Enter key/navigate from first option to last by up key

[lanitochka17]

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: 1.4.86-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/4647677
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in to New Expensify
2. Navigate to any chat
3. Right click on any message
4. Press Tab key
5. Press Enter
6. Press down arrow key
7. Press up arrow key

Expected Result:

In step 5., The highlighted emoji should be added as reaction to the message (works well for hover menu)
In step 7., User should be able to navigate from first highlighted option to the last one using arrow keys

Actual Result:

Step 5. Nothing happens user is unable to add reaction or open emoji picker using Enter key in context menu.
Step 7. Option does not change, user is unable to navigate from first option to last by up arrow key and from last to first by down arrow key

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

Bug6519480_1718894075855.2024-06-20_16-24-21.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f3361b27929e9c6b
• Upwork Job ID: 1805668929991815674
• Last Price Increase: 2024-07-23
• Automatic offers:
• dukenv0307 | Contributor | 102900677
• Krishna2323 | Contributor | 103280879

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (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]

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

[Krishna2323]

Proposal

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

Context menu - Unable to add reaction by Enter key/navigate from first option to last by up key

What is the root cause of that problem?

In BaseReportActionContextMenu, we are using useKeyboardShortcut which prevents default due to which the event is not captured by the pressable.

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

Lines 188 to 204 in 5bccd00

	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},
	);

Cyclically traverse is disabled intentionally in this PR

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

Line 169 in 896c14c

disableCyclicTraversal: true,

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

We should add shouldPreventDefault: false in the KeyboardShortcutConfig .

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

Line 203 in 5bccd00

{isActive: shouldEnableArrowNavigation},

What alternative solutions did you explore? (Optional)

[gijoe0295]

Proposal

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

1. Cannot select emoji by Enter key
2. Cannot cyclically traverse the menu items by arrow key

What is the root cause of that problem?

1. We defined custom Enter keyboard handler and it blocks the pressable's default event handler:

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

Lines 188 to 189 in 45a3c12

	useKeyboardShortcut(
	CONST.KEYBOARD_SHORTCUTS.ENTER,

2. We toggled disableCyclicTraversal:

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

Line 169 in 45a3c12

disableCyclicTraversal: true,

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

1. Add shouldPreventDefault: false to the keyboard handler above
2. Remove disableCyclicTraversal: true from the arrow key handler above

[bernhardoj]

The cyclic traversal is being discussed here

[melvin-bot]

@abekkala Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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