React events: make nested Focus work as expected (#15421)

This patch makes a change to the Focus module so that it only reports
focus/blur on the host node that's a direct child of the event component. This
brings the expected behaviour in line with the browser default of focus/blur
events not bubbling for Pressable.

Author: necolas

packages/react-events/src/Focus.js

@@ -50,67 +50,39 @@ function createFocusEvent(
 }
 
 functiondispatchFocusInEvents(
-event: null|ReactResponderEvent,
 context: ReactResponderContext,
 props: FocusProps,
 state: FocusState,
 ){
-if(event!=null){
-const{nativeEvent}=event;
-if(
-context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)
-){
-return;
-}
-}
+consttarget=((state.focusTarget: any): Element|Document);
 if(props.onFocus){
-constsyntheticEvent=createFocusEvent(
-'focus',
-((state.focusTarget: any): Element|Document),
-);
+constsyntheticEvent=createFocusEvent('focus',target);
 context.dispatchEvent(syntheticEvent,props.onFocus,{discrete: true});
 }
 if(props.onFocusChange){
 constlistener=()=>{
 props.onFocusChange(true);
 };
-constsyntheticEvent=createFocusEvent(
-'focuschange',
-((state.focusTarget: any): Element|Document),
-);
+constsyntheticEvent=createFocusEvent('focuschange',target);
 context.dispatchEvent(syntheticEvent,listener,{discrete: true});
 }
 }
 
 functiondispatchFocusOutEvents(
-event: null|ReactResponderEvent,
 context: ReactResponderContext,
 props: FocusProps,
 state: FocusState,
 ){
-if(event!=null){
-const{nativeEvent}=event;
-if(
-context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)
-){
-return;
-}
-}
+consttarget=((state.focusTarget: any): Element|Document);
 if(props.onBlur){
-constsyntheticEvent=createFocusEvent(
-'blur',
-((state.focusTarget: any): Element|Document),
-);
+constsyntheticEvent=createFocusEvent('blur',target);
 context.dispatchEvent(syntheticEvent,props.onBlur,{discrete: true});
 }
 if(props.onFocusChange){
 constlistener=()=>{
 props.onFocusChange(false);
 };
-constsyntheticEvent=createFocusEvent(
-'focuschange',
-((state.focusTarget: any): Element|Document),
-);
+constsyntheticEvent=createFocusEvent('focuschange',target);
 context.dispatchEvent(syntheticEvent,listener,{discrete: true});
 }
 }
@@ -121,7 +93,7 @@ function unmountResponder(
 state: FocusState,
 ): void{
 if(state.isFocused){
-dispatchFocusOutEvents(null,context,props,state);
+dispatchFocusOutEvents(context,props,state);
 }
 }
 
@@ -140,6 +112,8 @@ const FocusResponder = {
 state: FocusState,
 ): boolean{
 const{type,phase,target}=event;
+constshouldStopPropagation=
+props.stopPropagation===undefined ? true : props.stopPropagation;
 
 // Focus doesn't handle capture target events at this point
 if(phase===CAPTURE_PHASE){
@@ -148,22 +122,31 @@ const FocusResponder = {
 switch(type){
 case 'focus': {
 if(!state.isFocused){
-state.focusTarget=target;
-dispatchFocusInEvents(event,context,props,state);
+// Limit focus events to the direct child of the event component.
+// Browser focus is not expected to bubble.
+letcurrentTarget=(target: any);
+if(
+currentTarget.parentNode&&
+context.isTargetWithinEventComponent(currentTarget.parentNode)
+){
+break;
+}
+state.focusTarget=currentTarget;
+dispatchFocusInEvents(context,props,state);
 state.isFocused=true;
 }
 break;
 }
 case'blur': {
 if(state.isFocused){
-dispatchFocusOutEvents(event,context,props,state);
+dispatchFocusOutEvents(context,props,state);
 state.isFocused=false;
 state.focusTarget=null;
 }
 break;
 }
 }
-returnfalse;
+returnshouldStopPropagation;
 },
 onUnmount(
 context: ReactResponderContext,

packages/react-events/src/__tests__/Focus-test.internal.js

@@ -105,6 +105,50 @@ describe('Focus event responder', () => {
 });
 });
 
+describe('nested Focus components',()=>{
+it('does not propagate events by default',()=>{
+constevents=[];
+constinnerRef=React.createRef();
+constouterRef=React.createRef();
+constcreateEventHandler=msg=>()=>{
+events.push(msg);
+};
+
+constelement=(
+<Focus
+onBlur={createEventHandler('outer: onBlur')}
+onFocus={createEventHandler('outer: onFocus')}
+onFocusChange={createEventHandler('outer: onFocusChange')}>
+<divref={outerRef}>
+<Focus
+onBlur={createEventHandler('inner: onBlur')}
+onFocus={createEventHandler('inner: onFocus')}
+onFocusChange={createEventHandler('inner: onFocusChange')}>
+<divref={innerRef}/>
+</Focus>
+</div>
+</Focus>
+);
+
+ReactDOM.render(element,container);
+
+outerRef.current.dispatchEvent(createFocusEvent('focus'));
+outerRef.current.dispatchEvent(createFocusEvent('blur'));
+innerRef.current.dispatchEvent(createFocusEvent('focus'));
+innerRef.current.dispatchEvent(createFocusEvent('blur'));
+expect(events).toEqual([
+'outer: onFocus',
+'outer: onFocusChange',
+'outer: onBlur',
+'outer: onFocusChange',
+'inner: onFocus',
+'inner: onFocusChange',
+'inner: onBlur',
+'inner: onFocusChange',
+]);
+});
+});
+
 it('expect displayName to show up for event component',()=>{
 expect(Focus.displayName).toBe('Focus');
 });