[$250] Pressing space in the participant's split amount input goes to user's profile page.

[m-natarajan]

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.29-6
Reproducible in staging?: y
Reproducible in production?: y
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: @jayeshmangwani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725484726223549

Action Performed:

Action Performed:

1. Open the app and go to any group chat
2. Press + -> Split expense -> Enter amount -> Next
3. Edit any participant's amount and press Space

Expected Result:

Pressing space should have done nothing, just like any other non-number key press

Actual Result:

Pressing space in split amount input goes to user's profile

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

bug-space.mov

Recording.515.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

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

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

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

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-09-05 05:07:41 UTC.

Proposal

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

Pressing space in split amount input goes to user's profile

What is the root cause of that problem?

A Pressable with Button role will be rendered as button tag. A DOM button will trigger onclick on Spacebar key by default. Reference: necolas/react-native-web#2560 (comment). You can try it yourself.

When we press the spacebar in the amount tex input, the keyboard event will propagate to the parent Pressable then trigger the participant item's onPress and eventually open participant details page.

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

The problem here are:

• The Spacebar keydown on button does not trigger onKeyDown event but only onclick (i.e. onPress) event because this is the default browser behavior;
• And as such, this is a normal CLICK event and thus we don't know whether it derives from the Spacebar keydown action.

Fortunately, we can take advantage of onKeyDownCapture event which captures all key down events, independent of browser behavior.

1. Introduce isSpaceKeyDownOnInputRef to detect the Spacebar keydown event in BaseListItem
2. Specify onKeyDownCapture:

if (e && 'key' in e && e.key === ' ') {
    isSpaceKeyDownOnInputRef.current = true;
}

3. Introduce shouldPreventSpaceKeySubmit prop in BaseListItem, and early return in onPress just like shouldPreventEnterKeySubmit:

App/src/components/SelectionList/BaseListItem.tsx

Lines 83 to 85 in 651c9e0

	if (shouldPreventEnterKeySubmit && e && 'key' in e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
	return;
	}

if (shouldPreventSpaceKeySubmit && isSpaceKeyDownOnInputRef.current) {
    isSpaceKeyDownOnInputRef.current = false;
    return;
}

4. Toggle shouldPreventSpaceKeySubmit in BaseSelectionList;

App/src/components/SelectionList/BaseSelectionList.tsx

Line 465 in 41e6968

shouldPreventEnterKeySubmit

[melvin-bot]

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

[melvin-bot]

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

[M00rish]

Proposal

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

Pressing space in split amount input goes to user's profile

What is the root cause of that problem?

when pressing space key while in split amount input (MoneyRequestAmountInput.tsx) onPress event is triggered, and then it propagates to the parent which is Pressable then the Onpress event gets fired there and so we go to the user's Profile

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

we can simply ignore the space key while we are in split amount input (MoneyRequestAmountInput.tsx), by adding this line :
if (key === ' ' || key === 'spacebar) { nativeEvent.preventDefault(); }

to this function textInputKeyPress

App/src/components/MoneyRequestAmountInput.tsx

Lines 245 to 257 in 156b8b0

	const textInputKeyPress = ({nativeEvent}: NativeSyntheticEvent<KeyboardEvent>) => {
	const key = nativeEvent?.key.toLowerCase();
	if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
	// Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being
	// used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press.
	forwardDeletePressedRef.current = true;
	return;
	}
	// Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts.
	// Also check for the keyboard shortcut on iOS in cases where a hardware keyboard may be connected to the device.
	const operatingSystem = getOperatingSystem();
	forwardDeletePressedRef.current = key === 'delete' || ((operatingSystem === CONST.OS.MAC_OS || operatingSystem === CONST.OS.IOS) && nativeEvent?.ctrlKey && key === 'd');
	};

[melvin-bot]

📣 @M00rish! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-07 04:48:59 UTC.

Proposal


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

Pressing space in the participant's split amount input goes to user's profile page.

What is the root cause of that problem?

The pressable element will role button will call onpress on space key press also. And we don't have a mechanism to prevent the onPress event of the PressableWithFeedback when spacebar is pressed on the input.

App/src/components/SelectionList/BaseListItem.tsx

Lines 78 to 87 in 7814fbc

	onPress={(e) => {
	if (isMouseDownOnInput) {
	e?.stopPropagation(); // Preventing the click action
	return;
	}
	if (shouldPreventEnterKeySubmit && e && 'key' in e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
	return;
	}
	onSelectRow(item);
	}}

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


• We have already faced a similar bug, there we created a context for preventing onPress of the PressableWithFeedback when input is being dragged.
• Since we have the context for a similar case, we can utilize the context to solve this bug also.
• First we need to call setMouseDown when spacebar is pressed.
  

  App/src/components/MoneyRequestAmountInput.tsx

  Lines 242 to 257 in 7814fbc

  	/**
  	* Input handler to check for a forward-delete key (or keyboard shortcut) press.
  	*/
  	const textInputKeyPress = ({nativeEvent}: NativeSyntheticEvent<KeyboardEvent>) => {
  	const key = nativeEvent?.key.toLowerCase();
  	if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
  	// Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being
  	// used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press.
  	forwardDeletePressedRef.current = true;
  	return;
  	}
  	// Control-D on Mac is a keyboard shortcut for forward-delete. See https://support.apple.com/en-us/HT201236 for Mac keyboard shortcuts.
  	// Also check for the keyboard shortcut on iOS in cases where a hardware keyboard may be connected to the device.
  	const operatingSystem = getOperatingSystem();
  	forwardDeletePressedRef.current = key === 'delete' || ((operatingSystem === CONST.OS.MAC_OS || operatingSystem === CONST.OS.IOS) && nativeEvent?.ctrlKey && key === 'd');
  	};

• Then we can call setMouseUp(); when the input is blurred. Or we can use onKeyUp event to call setMouseUp();.
  

  App/src/components/MoneyRequestAmountInput.tsx

  Line 293 in 7814fbc

  onBlur={formatAmount}

OPTIONAL: We can call setMouseDown(); when input is focused and setMouseUp() when input is blurred.

What alternative solutions did you explore? (Optional)

We can change the role to menuitem

Result

Monosnap.screencast.2024-09-06.10-57-18.mp4

[bondydaa]

i'll be OOO next week so if we get proposals ready please ask for another engineer to review. cc @getusha

[melvin-bot]

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

[getusha]

Reviewing

[getusha]

@garrettmknight i don't think this is worth fixing, entering a space on a number input is unlikely to any user.

[garrettmknight]

I can get behind that.