[react-interactions] Add onFocusWithin event to FocusWithin responder (#17115)
Dominic Gannaway committed
Oct 16, 2019 at 22:57 UTC
916937563b4a71f2a61a75699f06122a544f4542
1 file changed
+24
-1
packages/react-interactions/events/src/dom/Focus.js
+24
-1
@@ -49,6 +49,7 @@ type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
49
50
type FocusWithinProps = {
51
disabled?: boolean,
52
+ onFocusWithin?: (e: FocusEvent) => void,
53
onBlurWithin?: (e: FocusEvent) => void,
54
onFocusWithinChange?: boolean => void,
55
onFocusWithinVisibleChange?: boolean => void,
@@ -57,7 +58,8 @@ type FocusWithinProps = {
58
type FocusWithinEventType =
59
| 'focuswithinvisiblechange'
60
| 'focuswithinchange'
60
- | 'blurwithin';
61
+ | 'blurwithin'
62
+ | 'focuswithin';
63
64
/**
65
* Shared between Focus and FocusWithin
@@ -239,6 +241,26 @@ function dispatchBlurEvents(
241
}
242
}
243
244
+function dispatchFocusWithinEvents(
245
+ context: ReactDOMResponderContext,
246
+ event: ReactDOMResponderEvent,
247
+ props: FocusWithinProps,
248
+ state: FocusState,
249
+) {
250
+ const pointerType = state.pointerType;
251
+ const target = ((state.focusTarget: any): Element | Document) || event.target;
252
+ const onFocusWithin = (props.onFocusWithin: any);
253
+ if (isFunction(onFocusWithin)) {
254
+ const syntheticEvent = createFocusEvent(
255
+ context,
256
+ 'focuswithin',
257
+ target,
258
+ pointerType,
259
+ );
260
+ context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
261
+ }
262
+}
263
+
264
function dispatchBlurWithinEvents(
265
context: ReactDOMResponderContext,
266
event: ReactDOMResponderEvent,
@@ -474,6 +496,7 @@ const focusWithinResponderImpl = {
496
state.isFocusVisible = isGlobalFocusVisible;
497
dispatchFocusWithinVisibleChangeEvent(context, props, state, true);
498
}
499
+ dispatchFocusWithinEvents(context, event, props, state);
500
break;
501
}
502
case 'blur': {