[HOLD for payment 2023-11-09] [$1000] Web – DOB – Error appears when year is selected using keyboard but doesn’t trough mouse.

[mvtglobally]

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. Open your user profile.
2. Click on the "Settings" option.
3. Select "Personal Details."
4. Choose "Date of Birth."
5. Pick a specific "Year."
6. Use the mouse to select any year by scrolling, and observe that no error occurs.
7. Go back to the previous screen.
8. Once again, click on "Date of Birth."
9. Select the desired "Year."
10. This time, use the keyboard (Up or Down arrow keys to scroll) to choose a year, and then press the "Enter" key.
11. Notice that an error message appears, stating "Please select a valid date."

Expected Result:

Selecting year using keyboard closes year picker modal but should not submit the form automatically

Actual Result:

An error message is shown when a year is selected using the keyboard, whereas no error message appears when the year is selected using the mouse.

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: 1.3.49-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Bug.6.mp4

Recording.1114.mp4

Expensify/Expensify Issue URL:
Issue reported by: @usmantariq96
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690950105791819

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01141507e0c0672ac6
• Upwork Job ID: 1690361323494866944
• Last Price Increase: 2023-09-02

[melvin-bot]

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

[mvtglobally]

@sonialiap Can you please also double check https://expensify.slack.com/archives/C049HHMV9SM/p1690955359134649
This seems similar issue. Let em know if it should be logged separately or has a same root cause

[hungvu193]

@mvtglobally This feels pretty dupe, you can find another issue when you select state or country from modal and press Enter, the form will trigger validate.

[mvtglobally]

@hungvu193 Can you please share the link for the dup. I wasnt able to find the GH issue, but also remember seeing similar

[bernhardoj]

Here is the issue #23834, but it gets closed.

[lukemorawski]

hey. It's Lucas from Callstack.
I think this should be fixed. By no means this is a desirable behaviour. The user selects the year by pressing Enter and doesn't want to submit the whole birthdate form.
Happy to take a look at this.

[lukemorawski]

I'm making an internal proposal today 🤞

[lukemorawski]

Proposal

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

When a user wants to change the DOB in the Settings > Profile > Personal Details > Date of birth, opens the Year selection modal and selects the year by pressing Enter, that creates a validation error on the Date of birth form.

What is the root cause of that problem?

The <FormSubmit /> component's submit action is done by using onKeyDownCapture synthetic keyboard event callback prop on RNW <View /> component that encapsulates the form.
When the app shows the year modal, it registers a keyboard shortcut for Enter key using useKeyboardShortcut hook. This is approach is utilised in couple of other places in the app. When user presses Enter on the year selection modal it not only selects the year, but also fires the FormSubmit onSubmit callback, triggering the validation. Since the user might had not selected the full date yet, the form shows a validation error.

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

In order to avoid triggering validation in forms when displaying a modal that registers Enter key as shortcut, the form should detect if a keyboard shortcut of that kind is currently registered and disable submitting until the shortcut is unregistered (upon modal unmount).
This can be done by implementing a new function isShortcutRegistered in the KeyboardShortcut module and invoking it in the onSubmit handler in the <FormSubmit /> component when a user presses Enter. If the shortcut for enter is registered and user pressed enter then just do an early return and don't call the onSubmit callback.

What alternative solutions did you explore?

None.

[melvin-bot]

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