Flatlist: Let ArrowUp/ArrowDown bubble at the top/bottom of list

[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

We have a client who would like the ArrowUp/Down event to bubble at the top and bottom of Flatlist (so that a super view like FocusZone can handle it). This is a simple change to make that happen.

Changelog

[macOS] [Fixed] - Flatlist: Let ArrowUp/ArrowDown bubble at the top/bottom of list

Test Plan

(I didn't include the test code in this PR)

Added a simple validKeysDown/onKeyDown test to the View that wraps <Flatlist> in the Flatlist test page to verify that the event did bubble.

Screen.Recording.2022-10-26.at.1.32.54.PM.mov

[harrieshin]

just to be clear at the end of the flat list, user will TAB to get out which is similar to other native macos list?

[Saadnajmi]

just to be clear at the end of the flat list, user will TAB to get out which is similar to other native macos list?

Right now, Flatlist still differs from native macOS lists in that "tab" will move focus between the rows, while arrow keys move selection. This is bad UX IMO, but when I worked on it last, I didn't know how to solve it without wrapping the Flatlist in a FocusZone (what our client does).

So with this change, at the end of a Flatlist, Tab will move focus to the next thing in the key view loop. If the Flatlist is wrapped by a FocusZone, that will be the first thing outside the FocusZone.