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.

packages/react-events/src/Focus.js

@@ -50,67 +50,39 @@ function createFocusEvent(
 }
 
 function dispatchFocusInEvents(
-  event: null | ReactResponderEvent,
   context: ReactResponderContext,
   props: FocusProps,
   state: FocusState,
 ) {
-  if (event != null) {
-    const {nativeEvent} = event;
-    if (
-      context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)
-    ) {
-      return;
-    }
-  }
+  const target = ((state.focusTarget: any): Element | Document);
   if (props.onFocus) {
-    const syntheticEvent = createFocusEvent(
-      'focus',
-      ((state.focusTarget: any): Element | Document),
-    );
+    const syntheticEvent = createFocusEvent('focus', target);
     context.dispatchEvent(syntheticEvent, props.onFocus, {discrete: true});
   }
   if (props.onFocusChange) {
     const listener = () => {
       props.onFocusChange(true);
     };
-    const syntheticEvent = createFocusEvent(
-      'focuschange',
-      ((state.focusTarget: any): Element | Document),
-    );
+    const syntheticEvent = createFocusEvent('focuschange', target);
     context.dispatchEvent(syntheticEvent, listener, {discrete: true});
   }
 }
 
 function dispatchFocusOutEvents(
-  event: null | ReactResponderEvent,
   context: ReactResponderContext,
   props: FocusProps,
   state: FocusState,
 ) {
-  if (event != null) {
-    const {nativeEvent} = event;
-    if (
-      context.isTargetWithinEventComponent((nativeEvent: any).relatedTarget)
-    ) {
-      return;
-    }
-  }
+  const target = ((state.focusTarget: any): Element | Document);
   if (props.onBlur) {
-    const syntheticEvent = createFocusEvent(
-      'blur',
-      ((state.focusTarget: any): Element | Document),
-    );
+    const syntheticEvent = createFocusEvent('blur', target);
     context.dispatchEvent(syntheticEvent, props.onBlur, {discrete: true});
   }
   if (props.onFocusChange) {
     const listener = () => {
       props.onFocusChange(false);
     };
-    const syntheticEvent = createFocusEvent(
-      'focuschange',
-      ((state.focusTarget: any): Element | Document),
-    );
+    const syntheticEvent = 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;
+    const shouldStopPropagation =
+      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.
+          let currentTarget = (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;
       }
     }
-    return false;
+    return shouldStopPropagation;
   },
   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', () => {
+      const events = [];
+      const innerRef = React.createRef();
+      const outerRef = React.createRef();
+      const createEventHandler = msg => () => {
+        events.push(msg);
+      };
+
+      const element = (
+        <Focus
+          onBlur={createEventHandler('outer: onBlur')}
+          onFocus={createEventHandler('outer: onFocus')}
+          onFocusChange={createEventHandler('outer: onFocusChange')}>
+          <div ref={outerRef}>
+            <Focus
+              onBlur={createEventHandler('inner: onBlur')}
+              onFocus={createEventHandler('inner: onFocus')}
+              onFocusChange={createEventHandler('inner: onFocusChange')}>
+              <div ref={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');
   });