React events: add a test for focusable descendants (#15457)

facebook · Apr 22, 2019 · 59c7aef · 59c7aef
1 parent 0a8da33
commit 59c7aef
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js
@@ -12,6 +12,7 @@ import type {
   ReactResponderContext,
 } from 'shared/ReactTypes';
 import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
+import {getEventCurrentTarget} from './utils.js';
 
 const CAPTURE_PHASE = 2;
 
@@ -120,21 +121,17 @@ const FocusResponder = {
     if (phase === CAPTURE_PHASE) {
       return false;
     }
+
     switch (type) {
       case 'focus': {
         if (!state.isFocused) {
           // 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 = getEventCurrentTarget(event, context);
+          if (state.focusTarget === target) {
+            dispatchFocusInEvents(context, props, state);
+            state.isFocused = true;
           }
-          state.focusTarget = currentTarget;
-          dispatchFocusInEvents(context, props, state);
-          state.isFocused = true;
         }
         break;
       }

diff --git a/packages/react-events/src/__tests__/Focus-test.internal.js b/packages/react-events/src/__tests__/Focus-test.internal.js
@@ -62,14 +62,17 @@ describe('Focus event responder', () => {
   });
 
   describe('onFocus', () => {
-    let onFocus, ref;
+    let onFocus, ref, innerRef;
 
     beforeEach(() => {
       onFocus = jest.fn();
       ref = React.createRef();
+      innerRef = React.createRef();
       const element = (
         <Focus onFocus={onFocus}>
-          <div ref={ref} />
+          <div ref={ref}>
+            <a ref={innerRef} />
+          </div>
         </Focus>
       );
       ReactDOM.render(element, container);
@@ -79,6 +82,12 @@ describe('Focus event responder', () => {
       ref.current.dispatchEvent(createFocusEvent('focus'));
       expect(onFocus).toHaveBeenCalledTimes(1);
     });
+
+    it('is not called if descendants of target receive focus', () => {
+      const target = innerRef.current;
+      target.dispatchEvent(createFocusEvent('focus'));
+      expect(onFocus).not.toBeCalled();
+    });
   });
 
   describe('onFocusChange', () => {