Fix onFocus/onBlur event bubbling#506
Merged
tom-un merged 48 commits intomicrosoft:masterfrom Jul 20, 2020
Merged
Conversation
…iew." This reverts commit 5a67ae0.
This was
linked to
issues
Jul 19, 2020
Closed
HeyImChris
approved these changes
Jul 20, 2020
…ocus/blur event triggering as View.
tom-un
added a commit
to tom-un/react-native
that referenced
this pull request
Jul 20, 2020
* Update scripts to publish react-native-macos-init * Clean up merge markers * Restored ios:macos RNTester parity except for InputAccessoryView. * Revert "Restored ios:macos RNTester parity except for InputAccessoryView." This reverts commit 5a67ae0. * Remove unnecessary android builds and tar file upload. * Fix onFocus/onBlur View events to properly bubble. * The Text component can also be selectable={true} and needs the same focus/blur event triggering as View. Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com>
4 tasks
tom-un
added a commit
that referenced
this pull request
Jul 21, 2020
* Fix onFocus/onBlur event bubbling (#506) * Update scripts to publish react-native-macos-init * Clean up merge markers * Restored ios:macos RNTester parity except for InputAccessoryView. * Revert "Restored ios:macos RNTester parity except for InputAccessoryView." This reverts commit 5a67ae0. * Remove unnecessary android builds and tar file upload. * Fix onFocus/onBlur View events to properly bubble. * The Text component can also be selectable={true} and needs the same focus/blur event triggering as View. Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com> * Added new RCTFocusChangeEvent to static xcodeproj's * Change vmImage to ubuntu-latest for Android builds. Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com>
HeyImChris
pushed a commit
to HeyImChris/react-native-macos
that referenced
this pull request
Aug 17, 2020
* Fix onFocus/onBlur event bubbling (microsoft#506) * Update scripts to publish react-native-macos-init * Clean up merge markers * Restored ios:macos RNTester parity except for InputAccessoryView. * Revert "Restored ios:macos RNTester parity except for InputAccessoryView." This reverts commit 5a67ae0. * Remove unnecessary android builds and tar file upload. * Fix onFocus/onBlur View events to properly bubble. * The Text component can also be selectable={true} and needs the same focus/blur event triggering as View. Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com> * Added new RCTFocusChangeEvent to static xcodeproj's * Change vmImage to ubuntu-latest for Android builds. Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com>
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
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
In react-native upstream on the
<TextInput>component hasonFocusandonBlurevents. In react-native-macos and react-native-windows, its possible for<View>and other components to have key focus soonFocusandonBlurare View props.The mac implementation, however, was not properly dispatching
focusandblurevents. If theRCTViewwhich received the nativebecomeFirstResponderorresignFirstResponderhappened to have anonFocusoronBlurprop set, the event would be dispatched. But if an ancestor component had ononFocusand the receiving native view did not, no JS event would fire and therefore no ancestor would receive the event.The old logic would simply check if the
_onFocusivar was non-nil and call it which indirectly would created aRCTComponentEventand dispatch it viaRCTEventDispatcher. The new logic directly creates aRCTComponentEventand sends it.Additionally, some components that wrap a
<View>such as the Touchables, and<Button>which wraps a Touchable were not properly forwarding theironFocus/onBlurprops.Changelog
[macOS] [Fixed] - Fix onFocus/onBlur event bubbling
Test Plan
The existing
FocusEventsExamplewas extended with additional tests exercising a focusable component with and without its own onFocus/onBlur props and an ancestor with onFocus/onBlur props.Microsoft Reviewers: Open in CodeFlow