[$1000] Web - Inconsistent Enter key behaviour on Split bill page vs Invite members page

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Click on Settings > Workspace > Select a workspace > Members > Invite
2. Hit Enter key on keyboard
3. Observe the behavior by hitting enter key repeatedly until all users have been selected and no other user is there to select and hit enter after that as well
4. Go back and click FAB > Split bill > Enter an amount > Next > Do step 2 and 3 here as well and compare the behavior

Expected Result:

Enter key should have a consistent action on both split bill and invite members page.

Actual Result:

Enter key does different things depending on the page

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.37-3
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-07-06.20.50.06.mp4

Recording.3471.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Nathan-Mulugeta
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688666077963009

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0161c0ea65c4194594
• Upwork Job ID: 1678511475953508352
• Last Price Increase: 2023-07-24

[melvin-bot]

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

[chiragxarora]

Proposal

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

Inconsistent Enter key behaviour on Split bill page vs Invite members

What is the root cause of that problem?

Root cause is the inconsistent props set for the OptionSelector functionality in both the pages WorkspaceInvitePage and MoneyRequestParticipantsSplitSelector

In MoneyRequestParticipantsSplitSelector, we have a prop called shouldShowConfirmButton which takes us to the next step after selecting maximum possible members

This is absent on workspace invite members page where we have added a manual form button using FormAlertWithSubmitButton

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

We need to replace the form button with the button caused by shouldShowConfirmButton

Results

What alternative solutions did you explore? (Optional)

We can remove the shouldShowConfirmButton from split selector page and add an explicit button there

[samh-nl]

Proposal

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

Inconsistent Enter behavior between Invite members page (workspace) vs Split bill page

What is the root cause of that problem?

The invite members page does not implement the footer functionality that is already present in the OptionsSelector component, while splitting the bill (MoneyRequestParticipantsSplitSelector) does. The OptionsSelector component contains the necessary functionality for correctly processing the Enter key.

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

Streamline the implementation of WorkspaceInvitePage with MoneyRequestParticipantsSplitSelector to use OptionsSelector's built-in footer functionality, this involves using the prop shouldShowConfirmButton.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[adelekennedy]

reproduced, I think the behavior should be the same!

[melvin-bot]

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

[melvin-bot]

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[adelekennedy]

not sure why overdue was added again - commenting to remove!

[elghanbibadr]

Proposal
Please re-state the problem that we are trying to solve in this issue.
Inconsistent Enter key behaviour on Split bill page vs Invite members

What is the root cause of that problem?
Root cause is the inconsistent props set for the OptionSelector functionality in both the pages WorkspaceInvitePage and MoneyRequestParticipantsSplitSelector

In MoneyRequestParticipantsSplitSelector, we have a prop called shouldShowConfirmButton which takes us to the next step after selecting maximum possible members

This is absent on workspace invite members page where we have added a manual form button using FormAlertWithSubmitButton

What changes do you think we should make in order to solve the problem?
We need to replace the form button with the button caused by shouldShowConfirmButton

Results
What alternative solutions did you explore? (Optional)
We can remove the shouldShowConfirmButton from split selector page and add an explicit button there

[mananjadhav]

I think before we proceed to review the proposals, @adelekennedy we should define consistency? I mean of the current two disparities, which one is the expected result?

[adelekennedy]

great point! I would assume we want to follow the invite flow but I'll discuss in bug-zero

[adelekennedy]

huh - I was just re-testing this to post and I see that the behavior is the same now. (hitting enter selects everyone on the list)

@mananjadhav I think this has been fixed

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@mananjadhav, @adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[adelekennedy]

Just tested again on desktop prod - I think we should close this out @Nathan-Mulugeta will be due for the reporting bonus

[adelekennedy]

great! Will you apply here @Nathan-Mulugeta ?

[Nathan-Mulugeta]

Just applied @adelekennedy

[melvin-bot]

@mananjadhav @adelekennedy this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[adelekennedy]

Offer sent on Upwork:
Issue reporter: @Nathan-Mulugeta $250.00 for the bug report

[Nathan-Mulugeta]

Offer accepted @adelekennedy

[adelekennedy]

and paid!