Fix onFocus/onBlur event bubbling

[tom-un]

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

In react-native upstream on the <TextInput> component has onFocus and onBlur events. In react-native-macos and react-native-windows, its possible for <View> and other components to have key focus so onFocus and onBlur are View props.

The mac implementation, however, was not properly dispatching focus and blur events. If the RCTView which received the native becomeFirstResponder or resignFirstResponder happened to have an onFocus or onBlur prop set, the event would be dispatched. But if an ancestor component had on onFocus and 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 _onFocus ivar was non-nil and call it which indirectly would created a RCTComponentEvent and dispatch it via RCTEventDispatcher. The new logic directly creates a RCTComponentEvent and sends it.

Additionally, some components that wrap a <View> such as the Touchables, and <Button> which wraps a Touchable were not properly forwarding their onFocus/onBlur props.

Changelog

[macOS] [Fixed] - Fix onFocus/onBlur event bubbling

Test Plan

The existing FocusEventsExample was 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