[$250] Distance rate - Unable to proceed with empty name via Enter key, while it works with green CTA

[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.65-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Collect workspace settings
3. Go to Distance rates
4. Click Add rate
5. Click Name
6. Hit Enter without entering the name
7. Return to previous page

Expected Result:

In Step 6, Enter key should save the empty name (because it works by clicking on the Save button)

Actual Result:

In Step 6, Enter key does not save the empty name
When returning to previous page in Step 7, error appears below the empty fields, which means Enter key is working elsewhere instead

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

Bug6460735_1713988573289.20240425_035123.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018c1c78753474f238
• Upwork Job ID: 1785417584710262784
• Last Price Increase: 2024-04-30
• Automatic offers:
• akinwale | Reviewer | 0
• abzokhattab | Contributor | 0

[melvin-bot]

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

@kevinksullivan 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]

Proposal

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

Unable to proceed with empty name via Enter key in Distance rate modal

What is the root cause of that problem?

The problem originates from how the Enter key event is managed across multiple interactive components within the Create Tax page setup.

Here's what's happening:

• The page uses a FormProvider component configured with disablePressOnEnter={false}, indicating that pressing the Enter key will submit the form.
• within the FormProvider children, the TextPicker is used as an InputComponent.
• When the TextPicker is opened, it opens a modal that includes text input and a save button, which also has the pressOnEnter enabled.

The core of the issue is that the Enter key press is activated in both the main form and the children modals, so when a user is in the TextPicker modal and presses Enter, FormAlertWithSubmitButton of the main will execute the onPress not the Text selector save button

This overlap in how the Enter key is handled between nested components causes confusion and incorrect behavior.

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

we can use the enterKeyEventListenerPriority to assign the enter key event priority inside the FormAlertWithSubmitButton and set it to 1 (lower priority) so that in such cases the child component submit button will have a higher priority

• to achieve that we need to add the enterKeyEventListenerPriority as new prop with a default value of 0 inside the FormAlertWithSubmitButton (also we need to add it into the FormAlertWithSubmitButtonProps types):

    enterKeyEventListenerPriority = 0,

• then this value should be passed here:

enterKeyEventListenerPriority={enterKeyEventListenerPriority}

• finally we need to set the enterKeyEventListenerPriority to 1 inside the FormAlertWithSubmitButton component call in the FormWrapper:

enterKeyEventListenerPriority={1}

POC

Screen.Recording.2024-04-25.at.4.32.16.AM.mov

[melvin-bot]

@kevinksullivan Eep! 4 days overdue now. Issues have feelings too...

[kevinksullivan]

Hm it's only for a brand new field but I was able to reproduce.

[kevinksullivan]

Going to add to Collect wave and make external, but I'd consider this a low priority.

[melvin-bot]

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

[melvin-bot]

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

[akinwale]

@abzokhattab's proposal makes sense here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

This issue has not been updated in over 15 days. @akinwale, @blimpich, @kevinksullivan, @abzokhattab eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[akinwale]

This was deployed to production on 2023-05-23 which makes payment due 2023-05-30.

cc @kevinksullivan

[blimpich]

I think we can close this? @kevinksullivan @akinwale @abzokhattab is payment complete?

[blimpich]

Closing, if this is wrong then please feel free to ping me in Slack.