[HOLD for payment 2023-02-13] [HOLD for payment 2023-02-10] Arrow key navigation stopped working

[roryabraham]

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

---

There is a regression on staging. All the testing / reproduction steps can be found here:

Log in to New Expensify.

Search Page

All Platforms

1. Click/tap on the magnifying glass icon to open the search page.
2. Click/tap on the x icon to close the search page.
3. Click/tap on the magnifying glass to open the search page.
4. Ensure you can scroll up and down in the results.
5. Enter a search query – the list should update accordingly.
6. Click/tap on a result: the search page should close and that chat should open.

Web/Desktop

1. Press CMD+K to open the search page.
2. Press Esc to close the search page.
3. Press CMD+K to reopen the search page.
4. Type in a search query.
5. Use the arrow keys to go through the search results. Make sure that the list "wraps", so:
   • If you are focused on the last result and press ArrowDown you are taken to the first result
   • If you are focused on the first result and press ArrowUp you are taken to the last result
6. With the focus somewhere in the middle of the list, update the search input such that there are no results
7. Press the arrow keys a few times – nothing should happen.
   1 Undo the change from the previous step by clearing the search input (press ALT+Delete). The focus should be on the first element of the list, and you should be able to use the arrows to navigate focus (as before)
8. Enter a new search term. Verify that the first result in the list is highlighted, and that you can navigate up and down from there using the arrow keys.
9. With a chat highlighted on the search page, press Enter. The search page should close and that chat should open.
10. Use the mouse to click on the magnifying glass icon and reopen the search page.
11. Press Esc to close the search page.
12. Click on the magnifying glass to reopen the search page.
13. Use the arrow keys and the enter key to select and open a different chat.
14. Press CMD+K to reopen the search page.
15. Use the arrows keys to highlight a search result, then press CMD+Enter. The search page should close and your selected chat should open.

New Chat Page

All Platforms

1. Click/tap on the green + icon on the home screen
2. Click/tap on New Chat.
3. Ensure that you can scroll the list of results.
4. Enter a search query and the results should update accordingly.
5. click/tap on a search result
6. The New Chat Page should close and a chat with your selected result should open.

Web/Desktop

1. Click on the green + icon on the home screen
2. Click on New Chat
3. Press ESC – the New Chat Page should close.
4. Click on the green + icon on the home screen.
5. Click on New Chat
6. Use the arrow keys to traverse the list of results. Make sure that the list "wraps", so:
   • If you are focused on the last result and press ArrowDown you are taken to the first result
   • If you are focused on the first result and press ArrowUp you are taken to the last result
7. With the focus somewhere in the middle of the list, update the search input such that there are no results.
8. Press the arrow keys a few times – nothing should happen.
9. Undo the change from the previous step – the focus should be back on the first element in the list
10. With a result highlighted, press Enter and that chat should open.
11. Reopen the New Chat page and use the arrow keys to highlight a different chat than the one you have open.
12. Press CMD+Enter and that chat should open.

New Group Page

#####All Platforms

1. Click/tap on the green + icon on the home screen
2. Click/tap on New Group.
3. Ensure that you can scroll the list of results.
4. Enter a search query and the results should update accordingly.
5. Click/tap on a result. That result should become checked and move to the top of the results. The list should scroll to the top automatically and you should be able to see your new selection.
6. Click/tap on another result. That result should become checked and move to the top of the results. The list should scroll to the top automatically and you should be able to see your new selection.
7. Click/tap on Create Group. The New Group page should close and a chat with all the selected users should open.

Web/Desktop

1. Click on the green + icon on the home screen.
2. Click New Group. The New Group Page should open.
3. Press ESC. The New Group page should close.
4. Press CMD+SHIFT+K. The New Group Page should open.
5. Press ESC. The New Group page should close.
6. Reopen the New Group Page.
7. If necessary, repeat the following until there are enough elements in the New Group page that the results are scrollable:
   1. Close the New Group page.
   2. Open the New Chat page.
   3. Create a chat with a user that you've not interacted with before.
   4. Reopen the New Group page and check if it's scrollable. If not, go back to the first step.
8. Use the arrow keys to traverse the list of results. Make sure that the list "wraps". There is a notable difference in expected behavior between this page and the New Chat Page in that the search bar is one of the focusable elements.
   • If you are focused on the last result and press ArrowDown you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the first result and press ArrowUp you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the search bar and press ArrowUp, you are taken to the last result.
   • If you are focused on the search bar and press ArrowDown, you are taken to the first result.
9. With one of the search results highlighted, press Enter. That result should get checked and move to the top of the list. The list should scroll to the top automatically and you should be able to see your new selection.
10. Use the ArrowDown key to highlight the first unselected result. It should be completely visible.
11. Use the arrow keys and Enter to select multiple results.
12. Use the arrow keys to highlight a selected result.
13. Press Enter to de-select that result.
14. With a result highlighted, press CMD+Enter, and a group should be opened with your selected results.
15. Reopen the New Group Page
16. Without selecting any results, press CMD+Enter. Nothing should happen
17. Select several results.
18. Use the arrow keys to go to the search bar (no results highlighted).
19. Press CMD+Enter, and a group should be opened with your selected results.
20. Reopen the New Group Page and select several results.
21. Use the arrow keys to go to the search bar (no results highlighted).
22. Press Enter (not CMD+Enter), and a group should be opened with your selected results.

IOU Participants (split bill)

All Platforms

1. Click/tap on the green + icon on the home screen.
2. Click/tap on Split Bill
3. Enter an amount.
4. Ensure that you can scroll the list of results.
5. Enter a search query and the results should update accordingly.
6. Make sure you can toggle / untoggle list items.
7. With some items selected and others not, press Next.
8. Verify that you the selected items are shown on the next page.

Web/Desktop

1. Click/tap on the green + icon on the home screen.
2. Click/tap on Split Bill
3. Enter an amount and press Next.
4. Enter a search query to get a reasonable-length list of options.
5. Use the arrow keys to traverse the list of results. Make sure that the list "wraps":
   • If you are focused on the last result and press ArrowDown you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the first result and press ArrowUp you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the search bar and press ArrowUp, you are taken to the last result.
   • If you are focused on the search bar and press ArrowDown, you are taken to the first result.
6. With one of the search results highlighted, press Enter. That result should get checked and move to the top of the list. The list should scroll to the top automatically and you should be able to see your new selection.
7. Use the arrow keys and Enter to select multiple results.
8. Use the arrow keys to highlight a selected result.
9. Press Enter to de-select that result.
10. With a result highlighted, press CMD+Enter, and you should move to the next page with your selected results.
11. Press the back arrow to go to the previous page.
12. With the search bar focused (no results highlighted), press CMD+Enter, and you should move to the next page with your selected results.
13. Press the back arrow to go to the previous page.
14. With the search bar focused (no results highlighted), press Enter (not CMD+Enter), and you should move to the next page with your selected results.

IOU Participants (1:1 request)

All Platforms

1. Click/tap on the green + icon on the home screen.
2. Click/tap on Request Money
3. Enter an amount and press Next
4. Ensure that you can scroll the list of results.
5. Enter a search query and the results should update accordingly.
6. Click/tap on a result, and there should be a new IOU request between you and your selected user.

Web/Desktop

1. Click/tap on the green + icon on the home screen.
2. Click/tap on Request Money
3. Enter an amount and press Next
4. Enter a search query to get a reasonable-length list of results.
5. Use the arrow keys to traverse the list of results. Make sure that the list "wraps":
   • If you are focused on the last result and press ArrowDown you are taken to the first result
   • If you are focused on the first result and press ArrowUp you are taken to the last result
6. With a result highlighted, press Enter. That should take you to the next page with your selected user.
7. Click on the back button.
8. Use the arrow keys to highlight different result.
9. Press CMD+Enter. That should take you to the next page with your new selected user.

IOU Confirmation List

All Platforms

1. Click/tap on the green + icon on the home screen.
2. Click/tap on Split Bill.
3. Enter an amount and press Next.
4. Select some participants and press Next.
5. Make sure that you can not select or deselect participants.
6. Hover the mouse over your participants – it should not change into a pointer cursor.
7. Press Split YOUR_AMOUNT
8. A new request should be created between you and each of your selected bill split participants.
9. Open a group chat.
10. Press the + in the composer and select Split Bill.
11. Make sure you can select and deselect participants, and that their proportional amount adjusts accordingly.
12. Hover your mouse over the participants – it should change into a pointer cursor and clicking on participants should select/deselect them.
13. With some participants selected and others not, press Split YOUR_AMOUNT.
14. A new request should be created between you and each of your selected bill split participants.

Web/Desktop

1. Open a group chat.
2. Click/tap on the + in the composer.
3. Click/tap on Split Bill.
4. Enter an amount and press Next.
5. Use the arrow keys to highlight participants. Make sure that the list "wraps":
   • If you are focused on the last result and press ArrowDown you are taken to the text input. None of the elements should be highlighted.
   • If you are focused on the first result and press ArrowUp you are taken to the text input. None of the elements should be highlighted.
   • If you are focused on the text input and press ArrowUp, you are taken to the last result.
   • If you are focused on the text input and press ArrowDown, you are taken to the first result.
6. With a result highlighted, pressing Enter should select and deselect participants, and their proportional amount should adjust accordingly.
7. Deselect all participants.
8. Press CMD + Enter. Verify that nothing happens (no IOU should be created with just yourself)
9. Reselect one or more participants.
10. With no result highlighted, press Enter. A new request should be created between you and each of your selected participants.
11. Open a group chat.
12. Click/tap on the + in the composer.
13. Click/tap on Split Bill.
14. Enter an amount and press Next.
15. With a result highlighted, press CMD+Enter. A new request should be created between you and each of your selected participants.
16. Open a 1:1 DM with another user (not Chronos or Concierge).
17. Press the + button in the compose bar and click Request Money
18. Enter an amount and press Next
19. Press Enter. The IOU should be created.

Workspace invite page

All Platforms

1. Create a workspace if you do not already have one.
2. Navigate to Settings -> Your Workspace -> Manage Members -> Invite.
3. Verify that you can scroll + search the results on the invite page.
4. Select several users from the list.
5. Press Invite, and verify that you are taken to the previous page and the new invitees are shown as members.

Web/Desktop

1. Create a workspace if you do not already have one.
2. Navigate to Settings -> Your Workspace -> Manage Members -> Invite.
3. Use the arrow keys to traverse the list. Verify that the list "wraps":
   • If you are focused on the last result and press ArrowDown you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the first result and press ArrowUp you are taken to the search bar. None of the elements should be highlighted.
   • If you are focused on the search bar and press ArrowUp, you are taken to the last result.
   • If you are focused on the search bar and press ArrowDown, you are taken to the first result.
4. With an option highlighted, press Enter. That option should be selected and moved to the top of the list. The list should scroll to the top automatically and you should be able to see your new selection.
5. Select a few more options.
6. Highlight a selected option and press Enter. That should deselect the option.
7. With a few options selected, move focus to the search bar (no items highlighted), and press Enter. That should take you to the previous page with the new invitees shown as members.
8. Press Invite again.
9. Use the arrow keys to select a few options.
10. With a search result highlighted, press CMD+Enter. That should take you to the previous page with the new invitees shown as members.
11. Press Invite again.
12. Use the arrow keys to select a few options.
13. With the search bar focused, press CMD+Enter. That should take you to the previous page with the new invitees shown as members.

IOU currency selection

All Platforms

1. Press the big green + to open the global create menu.
2. Select "request money"
3. Tap on the currency symbol ($ in US)
4. Search for another currency, verify the results list updates.
5. Select another currency, verify that the currency selection modal closes and the IOU amount page shows the new symbol for the currency you selected.

Web/Desktop

1. Press the big green + to open the global create menu.
2. Select "request money"
3. Click on the currency symbol ($ in US)
4. Search for another currency, verify the results lists updates.
5. Use the arrow key to scroll through the list. Verify that it "wraps" such that if you are at the bottom and press ArrowDown, you are taken to the top, and vice-versa.
6. With an item highlighted, change the search term.
7. Verify that the list scrolls back to the top and that the first item is highlighted
8. With an item highlighted, press the enter key.
9. Verify that the currency selection modal close and the IOU amount page shows the new symbol for the currency you selected.
10. Click on the currency symbol.
11. Use the arrow keys to highlight another option.
12. Press CMD+Enter
13. Verify that the currency selection modal close and the IOU amount page shows the new symbol for the currency you selected.

View all open jobs on GitHub

[melvin-bot]

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

[roryabraham]

Got a fix together: #14791

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[roryabraham]

This is fixed

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.64-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix OptionRow shouldComponentUpdate #14791

If no regressions arise, payment will be issued on 2023-02-10. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@roryabraham] The PR that introduced the bug has been identified. Link to the PR: Double Tapping Options Row Navigating Twice Fix And Navigation Refactoring To Resolve It From Queueing When There’s Already a Navigation Is In Progress #14426

• [@roryabraham] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Double Tapping Options Row Navigating Twice Fix And Navigation Refactoring To Resolve It From Queueing When There’s Already a Navigation Is In Progress #14426 (comment)

• [@roryabraham] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

  I think the only actionable suggestions I have that could have helped prevent this bug are:

  • Allowing the use of hooks instead always using class components for stateful components, preventing the need for the big refactor that introduced the regression
  • Using typescript also would have prevented this bug

  But because those suggestions amount to massive refactors, I'm not sure I'm ready to bring that big of a proposal to the team right now. I do think it would be a great improvement for developers and lead to higher code quality and maintainability, but there are legitimate concerns about the opportunity cost of going down that road.

• [@roryabraham] Propose regression test steps to ensure the same bug will not reach production again.

  • This is covered by existing regression tests. It did not reach production.

• [] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: n/a

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.65-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix OptionRow shouldComponentUpdate #14791

If no regressions arise, payment will be issued on 2023-02-13. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[roryabraham]

I already did the BugZero checklist, @MelvinBot!