Keyboard navigation in Flatlist

[Saadnajmi]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

This PR lights up the Flatlist prop enableSelectionOnKeyPress that allows one to use arrow keys to move selection between Flatlist cells. The functionality is opt-in.

We want Flatlist to behave like NSTableView does on macOS. That means:

1. Only the table takes keyboard focus, while each cell takes "selection"
2. Arrow keys can move selection between rows in the table.
3. Home & End scroll the table to top and bottom (without selecting a row).
4. Option+Up / Option+Down select the top and bottom row of the table

This would normally involve a lot of new custom keyboard events for Flatlist. Luckily, it seems my predecessors already wrote most of the code for this in the form of the enableSelectionOnKeyPress prop. This is a macOS only prop that basically did (2). The code path was broken, so this functionality never actually worked.

This PR fixes the logic so that enableSelectionOnKeyPress works again, along with adding extra handling for (4) and (5), Home/End/Option+Up/Option+Down. This PR does not address (1). I couldn't find a simple way to handle focus like NSTableView without sticking a FocusZone inside Flatlist. I'll leave that as a responsibility of the developer.

Caveats:

1. Selection is not exactly keyboard focus on macOS

Note that "Selection is slightly different than keyboard focus on macOS, due to legacy reasons involving NSCells. As far as I can tell, NSTableView takes (and keeps) focus while arrow keys change which row you can interact with. Why don't we move focus with selection, i.e: the selected row gets keyboard focus? It causes issues, as the "Tab" key isn't handled properly. For an NSTableView, "Tab" would move keyboard focus from the table view to the next control in the key view loop. For Flatlist with the new prop, "Tab" moves keyboard focus to the next row. This is undesirable behavior :/. A solution would be to put a FocusZone around the Flatlist... which might be something we explore in the future.

2. onScrollKeyDown is supposed to be deprecated

Per this Reconcile Keyboarding APIs in React Native proposal, we're supposed to deprecate onScrollKeyDown. But this new functionality uses it, and depends on its' existence. The day we align with the keyboarding API in React Native Windows, this whole change will need to be revisited.

Changelog

[macOS] [Fixed] - enable arrow key navigation in Flatlist

Test Plan

I added a new switch to the Flatlist example named "Keyboard Navigation" to set the prop. Since the prop is opt-in (false by default), existing users of Flatlist should not be affected.

Screen.Recording.2022-07-16.at.8.25.18.PM.mov

[Saadnajmi]

@chiuam will respond to both comments here

1. Opt+Down doesn't scroll to bottom of Flatlist

Yes, I think it scrolls into the last "realized" (aka, kept in memory) cell. By default, Flatlist keeps a "page" of views at the top and bottom of the list, along with your current viewport + a page above and below. This demo I think might actually be an infinite list, so it scrolls to the bottom of what is initially loaded. If you scroll down more, you will load more views, and then you can opt+down to the new "bottom" (199 for me). This isn't perfect, but I'm not sure how to handle infinite lists better. It seems that NSOutlineView in Xcode also does the same thing. See this Xcode project with a lot of errors. The first Opt+Down doesn't go to the bottom. It has to load in more errors, and then a second Opt+Down takes it to the bottom.

Screen.Recording.2022-07-18.at.10.48.35.AM.mov

2. First keyboard item gets selected

Yes, I made it so that no keyboard items are selected if enableSelectionOnKeyPress = false (what that switch is toggling), but the default selected item is the first row. Flatlist doesn't take keyboard focus when you switch it on. You still have to tab into the Flatlist or onto one of the cells for keyboard events. Once keyboard focus is on the Flatlist or a cell, keyboard events should work properly.

There's a few things I can do to help make this more clear:

1. I can make the ScrollView inside Flatlist focusable so the focus ring shows up, similar to what NSTableView does
2. I can add custom styling to distinguish between "selected, focused" and "selected, not focused" (I think Apple calls this "emphasized").

See an example of both those elements in this preferences pane table view

Screen.Recording.2022-07-18.at.11.01.36.AM.mov

Note that to get the full proper keyboarding behavior, you do need to wrap the Flatlist in a FocusZone. I couldn't get that working because I couldn't figure out how to side load my local RN-macOS changes into FURN easily to test =/. I can give it another go this week though.

[Saadnajmi]

With the latest changes, see video below. I couldn't get the emphasized look to work. That would require React Native macOS to support the bubbling focus props onFocusIn/Out in addition to onFocus. We currently don't, and that feels out of scope.

Screen.Recording.2022-07-18.at.4.41.55.PM.mov

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.