Skip to content

Commit aabb5df

Browse files
NickGerlemanfacebook-github-bot
authored andcommitted
Add types for onFocusCapture/onBlurCapture
Summary: Add capture-phase focus events to the type system, for use in the refactored VirtualizedList https://github.com/facebook/react-native/pull/32646/files Tracking the last focused child is done via focus events. Focus events are bubbling (vs direct events like onLayout), and are given both a "capture" phase, and "bubbling phase", like DOM events on the web. https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing The VirtualizedList change wants to know if a child will receive focus. This is not possible to reliably capture in the bubbling phase, since a child may stop propagation. See react-native-community/discussions-and-proposals#335 (comment) for some discussion with Scott Kyle about this issue back in the day This is done by convention in React by adding a "capture" variant of the `onXXX` method. For all platforms I've seen with focus events, these map the `topFocus` native event to `onFocus` for bubbling phase, and `onFocusCapture` for capture phase. See https://reactjs.org/docs/events.html#supported-events Changelog: [General][Added] - Add types for onFocusCapture/onBlurCapture Reviewed By: javache Differential Revision: D38013861 fbshipit-source-id: 7bda22e1a4d5e36ac5e34e804abf6fb318a41baf
1 parent 743f9ff commit aabb5df

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

Diff for: Libraries/Components/View/ViewPropTypes.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,6 @@ import type {
3333
export type ViewLayout = Layout;
3434
export type ViewLayoutEvent = LayoutEvent;
3535

36-
type BubblingEventProps = $ReadOnly<{|
37-
onBlur?: ?(event: BlurEvent) => mixed,
38-
onFocus?: ?(event: FocusEvent) => mixed,
39-
|}>;
40-
4136
type DirectEventProps = $ReadOnly<{|
4237
/**
4338
* When `accessible` is true, the system will try to invoke this function
@@ -105,6 +100,13 @@ type PointerEventProps = $ReadOnly<{|
105100
onPointerUpCapture?: ?(e: PointerEvent) => void,
106101
|}>;
107102

103+
type FocusEventProps = $ReadOnly<{|
104+
onBlur?: ?(event: BlurEvent) => void,
105+
onBlurCapture?: ?(event: BlurEvent) => void,
106+
onFocus?: ?(event: FocusEvent) => void,
107+
onFocusCapture?: ?(event: FocusEvent) => void,
108+
|}>;
109+
108110
type TouchEventProps = $ReadOnly<{|
109111
onTouchCancel?: ?(e: PressEvent) => void,
110112
onTouchCancelCapture?: ?(e: PressEvent) => void,
@@ -394,11 +396,11 @@ type IOSViewProps = $ReadOnly<{|
394396
|}>;
395397

396398
export type ViewProps = $ReadOnly<{|
397-
...BubblingEventProps,
398399
...DirectEventProps,
399400
...GestureResponderEventProps,
400401
...MouseEventProps,
401402
...PointerEventProps,
403+
...FocusEventProps,
402404
...TouchEventProps,
403405
...AndroidViewProps,
404406
...IOSViewProps,

0 commit comments

Comments
 (0)