[react-interactions] Add onFocusWithin event to FocusWithin responder (#17115)

trueadm · web-flow · commit 916937563b4a · 2019-10-16T22:57:08.000+02:00
diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js
@@ -49,6 +49,7 @@ type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
 
 type FocusWithinProps = {
 disabled?: boolean,
+ onFocusWithin?: (e: FocusEvent) => void,
 onBlurWithin?: (e: FocusEvent) => void,
 onFocusWithinChange?: boolean => void,
 onFocusWithinVisibleChange?: boolean => void,
@@ -57,7 +58,8 @@ type FocusWithinProps = {
 type FocusWithinEventType =
 | 'focuswithinvisiblechange'
 | 'focuswithinchange'
- | 'blurwithin';
+ | 'blurwithin'
+ | 'focuswithin';
 
 /**
 * Shared between Focus and FocusWithin
@@ -239,6 +241,26 @@ function dispatchBlurEvents(
 }
 }
 
+function dispatchFocusWithinEvents(
+ context: ReactDOMResponderContext,
+ event: ReactDOMResponderEvent,
+ props: FocusWithinProps,
+ state: FocusState,
+) {
+ const pointerType = state.pointerType;
+ const target = ((state.focusTarget: any): Element | Document) || event.target;
+ const onFocusWithin = (props.onFocusWithin: any);
+ if (isFunction(onFocusWithin)) {
+ const syntheticEvent = createFocusEvent(
+ context,
+ 'focuswithin',
+ target,
+ pointerType,
+ );
+ context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
+ }
+}
+
 function dispatchBlurWithinEvents(
 context: ReactDOMResponderContext,
 event: ReactDOMResponderEvent,
@@ -474,6 +496,7 @@ const focusWithinResponderImpl = {
 state.isFocusVisible = isGlobalFocusVisible;
 dispatchFocusWithinVisibleChangeEvent(context, props, state, true);
 }
+ dispatchFocusWithinEvents(context, event, props, state);
 break;
 }
 case 'blur': {

-Original file line number
+Diff line change
 typeFocusWithinProps={
 disabled?: boolean,
 +onFocusWithin?: (e: FocusEvent)=>void,
 onBlurWithin?: (e: FocusEvent)=>void,
 onFocusWithinChange?: boolean=>void,
 onFocusWithinVisibleChange?: boolean=>void,
 typeFocusWithinEventType=
 |'focuswithinvisiblechange'
 |'focuswithinchange'
 -|'blurwithin';
 +|'blurwithin'
 +|'focuswithin';
 /**
  * Shared between Focus and FocusWithin
+}
+}
 +functiondispatchFocusWithinEvents(
 +context: ReactDOMResponderContext,
 +event: ReactDOMResponderEvent,
 +props: FocusWithinProps,
 +state: FocusState,
 +){
 +constpointerType=state.pointerType;
 +consttarget=((state.focusTarget: any): Element|Document)||event.target;
 +constonFocusWithin=(props.onFocusWithin: any);
 +if(isFunction(onFocusWithin)){
 +constsyntheticEvent=createFocusEvent(
 +context,
 +'focuswithin',
 +target,
 +pointerType,
 +);
 +context.dispatchEvent(syntheticEvent,onFocusWithin,DiscreteEvent);
 +}
 +}
++
 functiondispatchBlurWithinEvents(
 context: ReactDOMResponderContext,
 event: ReactDOMResponderEvent,
 state.isFocusVisible=isGlobalFocusVisible;
 dispatchFocusWithinVisibleChangeEvent(context,props,state,true);
+}
 +dispatchFocusWithinEvents(context,event,props,state);
 break;
+}
 case'blur': {