Skip to content

Commit

Permalink
Add types for onFocusCapture/onBlurCapture
Browse files Browse the repository at this point in the history
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
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Jul 26, 2022
1 parent 743f9ff commit aabb5df
Showing 1 changed file with 8 additions and 6 deletions.
14 changes: 8 additions & 6 deletions Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,6 @@ import type {
export type ViewLayout = Layout;
export type ViewLayoutEvent = LayoutEvent;

type BubblingEventProps = $ReadOnly<{|
onBlur?: ?(event: BlurEvent) => mixed,
onFocus?: ?(event: FocusEvent) => mixed,
|}>;

type DirectEventProps = $ReadOnly<{|
/**
* When `accessible` is true, the system will try to invoke this function
Expand Down Expand Up @@ -105,6 +100,13 @@ type PointerEventProps = $ReadOnly<{|
onPointerUpCapture?: ?(e: PointerEvent) => void,
|}>;

type FocusEventProps = $ReadOnly<{|
onBlur?: ?(event: BlurEvent) => void,
onBlurCapture?: ?(event: BlurEvent) => void,
onFocus?: ?(event: FocusEvent) => void,
onFocusCapture?: ?(event: FocusEvent) => void,
|}>;

type TouchEventProps = $ReadOnly<{|
onTouchCancel?: ?(e: PressEvent) => void,
onTouchCancelCapture?: ?(e: PressEvent) => void,
Expand Down Expand Up @@ -394,11 +396,11 @@ type IOSViewProps = $ReadOnly<{|
|}>;

export type ViewProps = $ReadOnly<{|
...BubblingEventProps,
...DirectEventProps,
...GestureResponderEventProps,
...MouseEventProps,
...PointerEventProps,
...FocusEventProps,
...TouchEventProps,
...AndroidViewProps,
...IOSViewProps,
Expand Down

0 comments on commit aabb5df

Please sign in to comment.