Standardize arrow navigation in OptionsLists #7702

roryabraham · 2022-02-11T06:45:24Z

Details

Creates the ArrowKeyFocusManager component, which takes a few generic props and uses the arrow keys to manage a focusedIndex state.
Removes the keyboard event handling from the OptionsSelector component in preference of the ArrowKeyFocusManager
Implements ArrowKeyFocusManager in the IOUConfirmationList component
Implements scrollToIndex correctly for sections lists
Includes several performance improvements

Notable changes

The IOU currency page used to have an inconsistent UX compared to our other list pages. This PR DRYs that, gives it support for arrow navigation, and makes the UX consistent with other list pages. The behavior before was:

When you open the IOU currency page, the full list appears, and the current currency is selected in the list (appears with a checkbox next to it).
Selecting another currency deselects the current currency and selects another
There is a "confirm" button that changes the currency to whatever is selected.

The new behavior is:

When you open the IOU currency page, the full list appears
Selecting another currency changes the currency to whatever is selected

Furthermore, it now supports mouseless use via arrow navigation / enter to submit.

Known Limitations

When a single item is selected, arrow navigation does not always scroll to the right position (the selected item is sometimes partially or fully covered)
On Android, selecting the first item from recents section, scrolls the list and hide the selected item

Fixed Issues

$ #7648

PR Reviewer Checklist

Tests / QA Steps

Log in to New Expensify.

Search Page

All Platforms

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

Web/Desktop

Press CMD+K to open the search page.
Press Esc to close the search page.
Press CMD+K to reopen the search page.
Type in a search query.
Use the arrow keys to go through the search results. Make sure that the list "wraps", so:
1. If you are focused on the last result and press ArrowDown you are taken to the first result
2. If you are focused on the first result and press ArrowUp you are taken to the last result
With the focus somewhere in the middle of the list, update the search input such that there are no results.
Press the arrow keys a few times – nothing should happen.
Undo the change from the previous step – the focus should be where you left it and you should be able to use the arrows to navigate focus (as before)
With a specific item focused, update the search term such that the position of that item moves up or down in the list.
Verify that that same item remains focused (even though its position in the list changed).
With a chat focused on the search page, press Enter. The search page should close and that chat should open.
Use the mouse to click on the magnifying glass icon and reopen the search page.
Press Esc to close the search page.
Click on the magnifying glass to reopen the search page.
Use the arrow keys and the enter key to select and open a different chat.

New Chat Page

All Platforms

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

Web/Desktop

Click on the green + icon on the home screen
Click on New Chat
Press ESC – the New Chat Page should close.
Click on the green + icon on the home screen.
Click on New Chat
Use the arrow keys to traverse the list of results. Make sure that the list "wraps", so:
1. If you are focused on the last result and press ArrowDown you are taken to the first result
2. If you are focused on the first result and press ArrowUp you are taken to the last result
With the focus somewhere in the middle of the list, update the search input such that there are no results.
Press the arrow keys a few times – nothing should happen.
Undo the change from the previous step – the focus should be where you left it and you should be able to use the arrows to navigate focus (as before)
With a result highlighted, press Enter and that chat should open.
Reopen the New Chat page and use the arrow keys to highlight a different chat than the one you have open.
Press CMD+Enter and that chat should open.

New Group Page

All Platforms

Click/tap on the green + icon on the home screen
Click/tap on New Group.
Ensure that you can scroll the list of results.
Enter a search query and the results should update accordingly.
Click/tap on a result. That result should become checked and move to the top of the results.
Click/tap on another result. That result should become checked and move to the top of the results.
Click/tap on Create Group. The New Group page should close and a chat with all the selected users should open.

Web/Desktop

Click on the green + icon on the home screen.
Click New Group. The New Group Page should open.
Press ESC. The New Group page should close.
Press CMD+SHIFT+K. The New Group Page should open.
Press ESC. The New Group page should close.
Reopen the New Group Page.
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.
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.
1. 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.
2. 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.
3. If you are focused on the search bar and press ArrowUp, you are taken to the last result.
4. If you are focused on the search bar and press ArrowDown, you are taken to the first result.
With one of the search results highlighted, press Enter. That result should get checked and move to the top of the list.
Use the ArrowDown key to highlight the first unselected result. It should be completely visible.
Use the arrow keys and Enter to select multiple results.
Use the arrow keys to highlight a selected result.
Press Enter to de-select that result.
With a result highlighted, press CMD+Enter, and a group should be opened with your selected results.
Reopen the New Group Page and select several results.
Use the arrow keys to go to the search bar (no results highlighted).
Press CMD+Enter, and a group should be opened with your selected results.
Reopen the New Group Page and select several results.
Use the arrow keys to go to the search bar (no results highlighted).
Press Enter (not CMD+Enter), and a group should be opened with your selected results.

IOU Participants (split bill)

All Platforms

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

Web/Desktop

Click/tap on the green + icon on the home screen.
Click/tap on Split Bill
Enter an amount and press Next.
Enter a search query to get a reasonable-length list of options.
Use the arrow keys to traverse the list of results. Make sure that the list "wraps":
1. 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.
2. 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.
3. If you are focused on the search bar and press ArrowUp, you are taken to the last result.
4. If you are focused on the search bar and press ArrowDown, you are taken to the first result.
With one of the search results highlighted, press Enter. That result should get checked and move to the top of the list.
Use the arrow keys and Enter to select multiple results.
Use the arrow keys to highlight a selected result.
Press Enter to de-select that result.
With a result highlighted, press CMD+Enter, and you should move to the next page with your selected results.
Press the back arrow to go to the previous page.
With the search bar focused (no results highlighted), press CMD+Enter, and you should move to the next page with your selected results.
Press the back arrow to go to the previous page.
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

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

Web/Desktop

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

IOU Confirmation List

All Platforms

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

Web/Desktop

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

Workspace invite page

All Platforms

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

Web/Desktop

Create a workspace if you do not already have one.
Navigate to Settings -> Your Workspace -> Manage Members -> Invite.
Use the arrow keys to traverse the list. Verify that the list "wraps":
1. 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.
2. 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.
3. If you are focused on the search bar and press ArrowUp, you are taken to the last result.
4. If you are focused on the search bar and press ArrowDown, you are taken to the first result.
With an option highlighted, press Enter. That option should be selected and moved to the top of the list.
Select a few more options.
Highlight a selected option and press Enter. That should deselect the option.
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.
Press Invite again.
Use the arrow keys to select a few options.
With a search result highlighted, press CMD+Enter. That should take you to the previous page with the new invitees shown as members.

IOU currency selection

All Platforms

Press the big green + to open the global create menu.
Select "request money"
Tap on the currency symbol ($ in US)
Search for another currency, verify the results list updates.
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

Press the big green + to open the global create menu.
Select "request money"
Click on the currency symbol ($ in US)
Search for another currency, verify the results lists updates.
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.
With an item highlighted, change the search term.
Verify that the list scrolls back to the top and that the first item is highlighted
With an item highlighted, press the enter key.
Verify that the currency selection modal close and the IOU amount page shows the new symbol for the currency you selected.

Applause (important): Ensure that all of the above steps are covered in our regression test suite in TestFlight

In particular, we may need to add regression tests to cover using arrows to traverse lists. That is the main focus of this PR. Feel free to create an issue if necessary to give yourself more time and make it easier to track. Let me know if you have any questions.

Verify that no errors appear in the JS console

Tested On

Screenshots

Web

Web_Arrow_Navigation.mov

Mobile Web

Desktop

Desktop_Arrow_Nav.mov

iOS

Android

…twice

roryabraham · 2022-07-01T17:33:25Z

@kavimuru We created a separate issue for this: #9594. No need to block deploy on it

src/components/ArrowKeyFocusManager.js

Julesssss · 2022-07-04T18:29:28Z

@roryabraham would you mind attempting to resolve the regression again today? Thanks

marcaaron · 2022-07-05T21:42:45Z

Found a potential bug with this one related to the loading spinner. To reproduce:

Be on mobile web
Open a new tab and navigate to /search
Note that the loading spinner never goes away.

rushatgabhane · 2022-07-05T22:13:14Z

@marcaaron interesting.. can you also repro the bug on staging?

Because I can't

marcaaron · 2022-07-05T23:17:56Z

nope just tried and it only happens on main

roryabraham · 2022-07-05T23:26:20Z

@marcaaron I'm not able to reproduce that on main, which makes me think it's probably related to some API or Auth change that I don't have locally.

marcaaron · 2022-07-05T23:38:39Z

Cool. I will update and try to see if that resolves the issue. Mainly mentioned it here because it broke on a line of code this PR introduced so it seemed like a possible regression.

OSBotify · 2022-07-08T04:47:11Z

🚀 Deployed to production by @roryabraham in version: 1.1.79-17 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

luacmartins · 2023-02-13T13:30:37Z

I believe that this PR introduced this really edge-case bug. We should have either disabled the focus on disabled options or updated the logic in ComponentDidUpdate to match the one used in state, like this.

rushatgabhane · 2023-02-13T13:41:13Z

@luacmartins what's the bug again, you put the wrong link by mistake i think

luacmartins · 2023-02-13T13:45:54Z

ah sorry, edited with the correct link

rushatgabhane · 2023-02-13T14:04:26Z

woah, that is an edge case that i would have never thought of.

thanks for posting here!

Santhosh-Sellavel · 2023-07-02T21:56:21Z

src/pages/NewChatPage.js

+                                    headerMessage={headerMessage}
+                                    hideAdditionalOptionStates
+                                    forceTextUnreadStyle
+                                    shouldFocusOnSelectRow={this.props.isGroupChat}


This causes a minor regression on mobile web, showing the keyboard for every contact selection. Handled it by excluding for mobile browsers

This was intentional behaviour.

rushatgabhane · 2023-08-14T20:04:43Z

src/components/OptionsSelector.js

+                ref={el => this.textInput = el}
+                value={this.props.value}
+                label={this.props.textInputLabel}
+                onChangeText={(text) => {


Hi, we should have used the onSubmitEditing prop to enable selection using the software enter key for mobile.

Coming from #21472

c3024 · 2024-02-04T15:08:16Z

src/components/OptionsSelector.js

+        // Note: react-native's SectionList automatically strips out any empty sections.
+        // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
+        // Otherwise, it will cause an index-out-of-bounds error and crash the app.
+        let adjustedSectionIndex = sectionIndex;


SectionList does not appear to be removing the empty sections so this adjustment caused this issue #34112. This has been fixed with removing this adjustment of index.

roryabraham added 5 commits February 10, 2022 00:31

Remove unnecessary arrow function

e47da89

Fix arrow key navigation for new chat and new group pages

ad207d8

Fix arrow key navigation on IOUParticipantsPage

a8788b9

Clean up SettlementButton onPress

3ea199f

Merge branch 'main' into Rory-SearchResultsArrowNavigation

203d9ef

roryabraham mentioned this pull request Feb 11, 2022

[$1000] FEATURE REQUEST: Allow navigating the list in the new group dialog with arrow keys #7648

Closed

roryabraham added 2 commits February 11, 2022 16:02

Get naive working implementation in IOUConfirmationList

770ae54

Implement flattenSections in O(n) instead of O(n^2)

46a4a20

This comment was marked as off-topic.

Sign in to view

roryabraham added 12 commits February 11, 2022 17:51

Ditch the deprecated KeyboardEvent.keyCode

40dd812

Use KeyboardShortcuts lib instead of onKeyPress for OptionsSelector

2f1f1b8

Move keyboard event shim to platformSetup

91c813e

Deprecate disableArrowKeysActions

e4ae1a5

Create withArrowKeyListTraversal HOC

c89e442

Pass focusedIndex to wrapped component

851a8f0

Convert HOC to regular component

d2d5a50

Implement ArrowKeyFocusManager in OptionsSelector

86a4d48

Implement integerPropType and allow key events to bubble

2d7ed4e

Implement ArrowKeyFocusManager in IOUConfirmationList

5225c33

Fix off-by-one error in NewGroupPage and don't show selected options …

a3c4730

…twice

Optimize allOptions computation in OptionsSelector

8e9aef4

roryabraham changed the title ~~Implement arrow navigation in more OptionsLists~~ Standardize arrow navigation in OptionsLists Feb 15, 2022

roryabraham added 2 commits February 14, 2022 19:26

Fix JS style

1f6a301

Cleanup and optimize IOUConfirmationList

410b0f8

roryabraham self-assigned this Feb 15, 2022

roryabraham added 5 commits February 15, 2022 14:47

Merge branch 'main' into Rory-SearchResultsArrowNavigation

b12e61e

Get rid of unnecessary arrow function in render

d0882bb

Make enter key create new group if search bar is focused

65de321

Don't scroll to top if we can't select multiple options

6e9efea

Make CMD+Enter create a group

b738d4e

kbecciv mentioned this pull request Jul 1, 2022

Web - New Group - Crash when deleting digits in a search query for specific accounts #9671

Closed

roryabraham mentioned this pull request Jul 1, 2022

Make CMD+Enter work for single-selection pages #9672

Merged

88 tasks

kbecciv mentioned this pull request Jul 1, 2022

Web - Pressing Enter key is selected different currency, and up and down keys don't work #9678

Closed

Julesssss reviewed Jul 4, 2022

View reviewed changes

src/components/ArrowKeyFocusManager.js Show resolved Hide resolved

kbecciv mentioned this pull request Jul 4, 2022

Search - Focus moves to the 1st line of results when the search query #9695

Closed

marcaaron mentioned this pull request Jul 5, 2022

Bump react-navigation versions #9718

Merged

89 tasks

thesahindia mentioned this pull request Jul 6, 2022

Up and down key doesn't work on the search list when the browser/app size is decreased - reported by @adeel0202 #9735

Closed

kbecciv mentioned this pull request Jul 6, 2022

[$250] Web - A new Split bill isn't created between you and each of your selected participants, displayed after refresh #9747

Closed

tgolen mentioned this pull request Sep 14, 2022

Optimize the left-hand-nav to only render options when they need to be visible #10800

Merged

93 tasks

roryabraham mentioned this pull request Feb 3, 2023

Deploy Checklist: New Expensify 2023-02-02 #14771

Closed

30 tasks

luacmartins mentioned this pull request Feb 13, 2023

[HOLD for payment 2023-02-10] Request -The selected participant is highlighted when the profile's language is changed #14441

Closed

6 tasks

hellohublot mentioned this pull request May 19, 2023

[HOLD #20353] [$1000] Enter key isn’t creating new line for new members invitation message textinput #18419

Closed

6 tasks

Santhosh-Sellavel reviewed Jul 2, 2023

View reviewed changes

Santhosh-Sellavel mentioned this pull request Jul 2, 2023

[HOLD for payment 2023-06-29] [$1000] Keyboard is popping up everytime user selects a contact when creating a new group #20636

Closed

6 tasks

rushatgabhane reviewed Aug 14, 2023

View reviewed changes

rushatgabhane mentioned this pull request Aug 14, 2023

[HOLD for payment 2023-08-21] [$2000] Hitting enter key on keyboard does not select a pronoun #21472

Closed

6 tasks

bernhardoj mentioned this pull request Jan 9, 2024

[HOLD for payment 2024-02-07] [$500] Search - Focused account hidden by "Star a chat, get $250." when navigating with an arrow #34112

Closed

6 tasks

c3024 reviewed Feb 4, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Standardize arrow navigation in OptionsLists #7702

Standardize arrow navigation in OptionsLists #7702

roryabraham commented Feb 11, 2022 •

edited

This comment was marked as off-topic.

roryabraham commented Jul 1, 2022

Julesssss commented Jul 4, 2022

marcaaron commented Jul 5, 2022

rushatgabhane commented Jul 5, 2022 •

edited

marcaaron commented Jul 5, 2022

roryabraham commented Jul 5, 2022

marcaaron commented Jul 5, 2022

OSBotify commented Jul 8, 2022

luacmartins commented Feb 13, 2023 •

edited

rushatgabhane commented Feb 13, 2023

luacmartins commented Feb 13, 2023

rushatgabhane commented Feb 13, 2023

Santhosh-Sellavel Jul 2, 2023

parasharrajat Jul 3, 2023

rushatgabhane Aug 14, 2023

c3024 Feb 4, 2024 •

edited

Standardize arrow navigation in OptionsLists #7702

Standardize arrow navigation in OptionsLists #7702

Conversation

roryabraham commented Feb 11, 2022 • edited

Details

Notable changes

Known Limitations

Fixed Issues

PR Reviewer Checklist

Tests / QA Steps

Search Page

All Platforms

Web/Desktop

New Chat Page

All Platforms

Web/Desktop

New Group Page

All Platforms

Web/Desktop

IOU Participants (split bill)

All Platforms

Web/Desktop

IOU Participants (1:1 request)

All Platforms

Web/Desktop

IOU Confirmation List

All Platforms

Web/Desktop

Workspace invite page

All Platforms

Web/Desktop

IOU currency selection

All Platforms

Web/Desktop

Applause (important): Ensure that all of the above steps are covered in our regression test suite in TestFlight

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

This comment was marked as off-topic.

roryabraham commented Jul 1, 2022

Julesssss commented Jul 4, 2022

marcaaron commented Jul 5, 2022

rushatgabhane commented Jul 5, 2022 • edited

marcaaron commented Jul 5, 2022

roryabraham commented Jul 5, 2022

marcaaron commented Jul 5, 2022

OSBotify commented Jul 8, 2022

luacmartins commented Feb 13, 2023 • edited

rushatgabhane commented Feb 13, 2023

luacmartins commented Feb 13, 2023

rushatgabhane commented Feb 13, 2023

Santhosh-Sellavel Jul 2, 2023

Choose a reason for hiding this comment

parasharrajat Jul 3, 2023

Choose a reason for hiding this comment

rushatgabhane Aug 14, 2023

Choose a reason for hiding this comment

c3024 Feb 4, 2024 • edited

Choose a reason for hiding this comment

roryabraham commented Feb 11, 2022 •

edited

rushatgabhane commented Jul 5, 2022 •

edited

luacmartins commented Feb 13, 2023 •

edited

c3024 Feb 4, 2024 •

edited