[HOLD for payment 2023-09-07] [$500] Web - Keyboard Delete Key Functions Incorrectly: Deletes in Wrong Direction and Has No Effect

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to FAB, then select "Request Money."
2. Input an amount (e.g., "123456").
3. Position the cursor between the second and third digit by clicking in that specific location.
4. Press the keyboard's delete key to erase characters (take note of the deletion direction).
5. Following two delete key presses (or after the left-sided numbers vanish), execute another delete key press, and observe the cursor's placement.

Expected Result:

In step 4, the deletion should occur to the right of the cursor. During step 5, pressing the delete key should not cause the cursor to leap to the end of the amount. Conversely, if the intended deletion direction is to the left, and the cursor jumps to the amount's end, the delete key should still erase numbers to the left.

Actual Result:

When pressing the keyboard's delete key, the numbers located to the left of the cursor are deleted. Once all left-sided numbers have been erased and the delete key is pressed again, the cursor jumps to the amount's end. After the cursor's relocation to the amount's end, the delete key ceases to remove numbers positioned to the cursor's left.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.55-7

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

Notes/Photos/Videos: Any additional supporting documentation

2023-08-11.11.07.07.mp4

Recording.1270.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Nathan-Mulugeta

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691742018138099

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f6bacb5a4e8eaf7a
• Upwork Job ID: 1694305640174825472
• Last Price Increase: 2023-08-23
• Automatic offers:
• akinwale | Contributor | 26296415
• Nathan-Mulugeta | Reporter | 26296416

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[akinwale]

Proposal

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

Pressing Delete on the keyboard in the Request Money input field does not place the cursor correctly afterwards.

What is the root cause of that problem?

When calculating the new cursor position in the setNewAmount method of the MoneyRequestAmountForm component, the logic does not take into account the fact that the length of prevAmount could be higher than the new amount's length (in the case of a number in between other numbers deleted by using the "Delete" key).

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 123 to 127 in 2b2bafd

	setCurrentAmount((prevAmount) => {
	setSelection((prevSelection) => getNewSelection(prevSelection, prevAmount.length, newAmountWithoutSpaces.length));
	return MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces);
	});
	};

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

Calculate the new cursor position based on whether or not the prevAmount length is greater than the new amount's length. We also have to check if it was the 'Delete' key or the 'Backspace' key that was pressed for the input. The solution can be achieved in the following steps:

1. Add a ref to store the last character clear operation ('Backspace' or 'Delete').

const lastClearOpRef = useRef(null);

2. Add an onKeyPress handler for TextInputWithCurrencySymbol and update the corresponding root components (AmountTextInput, TextInput) by adding onKeyPress={props.onKeyPress}.

const textInputKeyPress = ({nativeEvent}) => {
    const key = nativeEvent.key.toLowerCase();
    // Ctrl+D on macOS is a keyboard shortcut for forward-delete
    // see https://support.apple.com/en-us/HT201236 for the keyboard shortcuts
    if (nativeEvent.key === 'delete' ||
            (getOperatingSystem() === CONST.OS.MAC_OS && nativeEvent.ctrlKey && nativeEvent.key === 'd')) {
        lastClearOpRef.current = 'delete';
        return;
    }
}

3. Update the setSelection operation in the setNewAmount#setCurrentAmount method.

setSelection((prevSelection) =>
    getNewSelection(
        prevSelection,
        prevAmount.length > newAmountWithoutSpaces.length && lastClearOpRef.current === 'delete' ? newAmountWithoutSpaces.length : prevAmount.length,
        newAmountWithoutSpaces.length,
    ),
);

What alternative solutions did you explore? (Optional)

None.

[trjExpensify]

These are the supported platforms for accepted bug reports:

Android / native
Android / Chrome
iOS / native
iOS / Safari
MacOS / Chrome / Safari
MacOS / Desktop

I see MacOS / Chrome / Safari was checked, but this is a Windows-only issue. There isn't an explicit Delete button on Mac to forward delete, and backspace is working as intended. As such, I think we close this one out as it isn't a focus as of now. Happy for a second opinion though! CC: @mountiny @s77rt

[akinwale]

These are the supported platforms for accepted bug reports:

Android / native
Android / Chrome
iOS / native
iOS / Safari
MacOS / Chrome / Safari
MacOS / Desktop

I see MacOS / Chrome / Safari was checked, but this is a Windows-only issue. There isn't an explicit Delete button on Mac to forward delete, and backspace is working as intended. As such, I think we close this one out as it isn't a focus as of now. Happy for a second opinion though! CC: @mountiny @s77rt

I have a bit of a bias since I already posted a proposal, but I think this is worth fixing for a few reasons.

• Some users may be using a third-party keyboard with their Macs, some of which do have a dedicated forward-delete key. I use a Keychron C2 mechanical keyboard with my Mac, for instance.
• It happens in all browsers, regardless of the running OS, so it can easily be reproduced on macOS as well.
• The Apple Support site also provides a list of Mac keyboard shortcuts which includes shortcuts for forward delete (using Control-D, or Fn-Delete). There may be users who want to use these shortcuts if they do not have the key available on their keyboards.

[mountiny]

Yeah I think this can be fixable for lower bounty $500 since its low priority as well

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[trjExpensify]

Fair point on the keyboard! We're not officially putting a focus on keyboard shortcuts, but I'm happy to move it forward with a lower bounty priority.

[melvin-bot]

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