Add support for modifying the key view loop #769
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Merge upstream into fork
Saadnajmi
commented
May 20, 2021
| * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", | ||
| */ | ||
| validKeysUp?: ?Array<string>, | ||
|
|
There was a problem hiding this comment.
This is left over from adding and removing the prop... but should probably be here so I'll keep it
HeyImChris
approved these changes
May 20, 2021
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
May 21, 2021
* Update RCTCxxBridge.mm * Update RCTCxxBridge.mm * initial props * initial key loop standup * update props * podfile * Add a few refs * NextKeyView -> NextKeyViewTest * More stuff * commit local changes * rip * commit local WIP * WIP * Clean up code a but for debugging * Key view loop works on a second pass * Move code to componentDidMount, but I still need the console logs in onFocus... * Latest local changes * Taking Tomun's approach * Clean up code * More cleanup * more clean up * for chris * wip * wip * WIP to see the diff * Cleanup * More cleanup * I guess the onFocus hack is the way to go * Cleanup * Update tags * Fix flow checks * yarn lint check fix * comment out flipper * Uncomment Flipper. We should just fix the CI failure instead * Clean up example fix ifdefs * Remove prop from everyhing but View * More comments * Minor indent fix * Revert podifle changes * update podfile * lint fix Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com>
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
May 21, 2021
* Update RCTCxxBridge.mm * Update RCTCxxBridge.mm * initial props * initial key loop standup * update props * podfile * Add a few refs * NextKeyView -> NextKeyViewTest * More stuff * commit local changes * rip * commit local WIP * WIP * Clean up code a but for debugging * Key view loop works on a second pass * Move code to componentDidMount, but I still need the console logs in onFocus... * Latest local changes * Taking Tomun's approach * Clean up code * More cleanup * more clean up * for chris * wip * wip * WIP to see the diff * Cleanup * More cleanup * I guess the onFocus hack is the way to go * Cleanup * Update tags * Fix flow checks * yarn lint check fix * comment out flipper * Uncomment Flipper. We should just fix the CI failure instead * Clean up example fix ifdefs * Remove prop from everyhing but View * More comments * Minor indent fix * Revert podifle changes * update podfile * lint fix Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com>
HeyImChris
added a commit
that referenced
this pull request
May 24, 2021
* Add support for modifying the key view loop (#769) * Update RCTCxxBridge.mm * Update RCTCxxBridge.mm * initial props * initial key loop standup * update props * podfile * Add a few refs * NextKeyView -> NextKeyViewTest * More stuff * commit local changes * rip * commit local WIP * WIP * Clean up code a but for debugging * Key view loop works on a second pass * Move code to componentDidMount, but I still need the console logs in onFocus... * Latest local changes * Taking Tomun's approach * Clean up code * More cleanup * more clean up * for chris * wip * wip * WIP to see the diff * Cleanup * More cleanup * I guess the onFocus hack is the way to go * Cleanup * Update tags * Fix flow checks * yarn lint check fix * comment out flipper * Uncomment Flipper. We should just fix the CI failure instead * Clean up example fix ifdefs * Remove prop from everyhing but View * More comments * Minor indent fix * Revert podifle changes * update podfile * lint fix Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com> * revert changes not part of cherry pick * Another revert Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com>
HeyImChris
added a commit
that referenced
this pull request
May 24, 2021
* Update RCTCxxBridge.mm * Update RCTCxxBridge.mm * initial props * initial key loop standup * update props * podfile * Add a few refs * NextKeyView -> NextKeyViewTest * More stuff * commit local changes * rip * commit local WIP * WIP * Clean up code a but for debugging * Key view loop works on a second pass * Move code to componentDidMount, but I still need the console logs in onFocus... * Latest local changes * Taking Tomun's approach * Clean up code * More cleanup * more clean up * for chris * wip * wip * WIP to see the diff * Cleanup * More cleanup * I guess the onFocus hack is the way to go * Cleanup * Update tags * Fix flow checks * yarn lint check fix * comment out flipper * Uncomment Flipper. We should just fix the CI failure instead * Clean up example fix ifdefs * Remove prop from everyhing but View * More comments * Minor indent fix * Revert podifle changes * update podfile * lint fix Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com> Co-authored-by: Chris Hogan <chrishog@microsoft.com> Co-authored-by: HeyImChris <48299693+HeyImChris@users.noreply.github.com>
4 tasks
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 5, 2023
This reverts commit 14ce7dc.
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 14, 2023
This reverts commit 14ce7dc.
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 14, 2023
This reverts commit 14ce7dc.
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 14, 2023
This reverts commit 14ce7dc.
Saadnajmi
added a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jan 14, 2023
This reverts commit 14ce7dc.
Saadnajmi
added a commit
that referenced
this pull request
Jan 14, 2023
Saadnajmi
added a commit
to shwanton/react-native-macos
that referenced
this pull request
Jan 14, 2023
…icrosoft#1621) This reverts commit 14ce7dc.
shwanton
pushed a commit
to shwanton/react-native-macos
that referenced
this pull request
Feb 13, 2023
…icrosoft#1621) This reverts commit 14ce7dc.
shwanton
pushed a commit
to shwanton/react-native-macos
that referenced
this pull request
Feb 13, 2023
…icrosoft#1621) This reverts commit 14ce7dc.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Please select one of the following
Summary
Note: Key view loops are finicky and I have written some of my findings into documentation at microsoft/apple-ux-guide#6 . Most of it is relevant to this PR, specifically the fact that if your window's
autoRecalculatesKeyViewLoopproperty is set totrue, then any custom nextKeyView properties you set are stamped out whenever a view is added or whenever you press tab.This closes #768.
We would like to add support for setting the next key view of a component in react native, mirroring the underlying
NSVIewpropertynextKeyView. We do this by creating a custom property onRCTViewthat takes in the reactTag of a nextKeyView, and uses the UIManager to look up the view and set it as the nextKeyView.There was a catch: I had to set the prop in the
onFocusmethod of the view, rather than just in the normal JSX initialization. This was the only way I found to get around the fact that RNTester's window automatically recalculates the key view loop. As it turns out, it seems to even recalculate the key view loop every time you tab into a new view. Thus, the only place I could set the prop where it would not get stamped out was right after focus, hence using theonFocuscallback.I considered setting
window.autoRecalculatesKeyViewLoop = falsein RNTester a non sequitur because that would require us creating a completely manual key view loop for every view in RNTester.. which is no fun and not an approach we would recommend.Changelog
[macOS] [Added] - Added nextKeyView prop to View and other related components
Test Plan
I added a page to RNTester that demonstrates the use of this new prop.
Screen.Recording.2021-05-09.at.9.49.03.PM.mov