Fix bug with PressLegacy blur (#18194)

facebook · Mar 2, 2020 · dbc7b9f · dbc7b9f
1 parent 62861bb
commit dbc7b9f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js
@@ -886,16 +886,9 @@ const pressResponderImpl = {
         break;
       }
       case 'blur': {
-        // If we encounter a blur event that moves focus to
-        // the window, then the relatedTarget will be null.
-        // In this case, we should cancel the active press.
-        // Alternatively, if the blur target matches the
-        // current pressed target, we should also cancel
-        // the active press.
-        if (
-          isPressed &&
-          (nativeEvent.relatedTarget === null || target === state.pressTarget)
-        ) {
+        // If we encounter a blur that happens on the pressed target
+        // then disengage the blur.
+        if (isPressed && target === state.pressTarget) {
           dispatchCancel(event, context, props, state);
         }
       }

diff --git a/packages/react-interactions/events/src/dom/Tap.js b/packages/react-interactions/events/src/dom/Tap.js
@@ -103,6 +103,7 @@ const rootEventTypes = hasPointerEvents
       'pointermove',
       'pointercancel',
       'scroll',
+      'blur',
     ]
   : [
       'click_active',
@@ -114,6 +115,7 @@ const rootEventTypes = hasPointerEvents
       'touchmove',
       'touchcancel',
       'scroll',
+      'blur',
     ];
 
 /**
@@ -697,6 +699,13 @@ const responderImpl = {
         removeRootEventTypes(context, state);
         break;
       }
+      case 'blur': {
+        // If we encounter a blur that happens on the pressed target
+        // then disengage the blur.
+        if (state.isActive && nativeEvent.target === state.responderTarget) {
+          dispatchCancel(context, props, state);
+        }
+      }
     }
   },
   onUnmount(

diff --git a/packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js
@@ -700,4 +700,25 @@ describeWithPointerEvent('Press responder', hasPointerEvents => {
     target.pointerup();
     target.pointerdown();
   });
+
+  it('when blur occurs on a pressed target, we should disengage press', () => {
+    const onPress = jest.fn();
+    const onPressStart = jest.fn();
+    const onPressEnd = jest.fn();
+    const buttonRef = React.createRef();
+
+    const Component = () => {
+      const listener = usePress({onPress, onPressStart, onPressEnd});
+      return <button ref={buttonRef} DEPRECATED_flareListeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+
+    const target = createEventTarget(buttonRef.current);
+    target.pointerdown();
+    expect(onPressStart).toBeCalled();
+    target.blur();
+    expect(onPressEnd).toBeCalled();
+    target.pointerup();
+    expect(onPress).not.toBeCalled();
+  });
 });
diff --git a/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js
@@ -1173,10 +1173,10 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
     expect(onPressEnd).toBeCalled();
   });
 
-  it('focus moving to the window should stop the press', () => {
-    const onPress = jest.fn(e => e.preventDefault());
-    const onPressStart = jest.fn(e => e.preventDefault());
-    const onPressEnd = jest.fn(e => e.preventDefault());
+  it('when blur occurs on a pressed target, we should disengage press', () => {
+    const onPress = jest.fn();
+    const onPressStart = jest.fn();
+    const onPressEnd = jest.fn();
     const buttonRef = React.createRef();
 
     const Component = () => {
@@ -1187,10 +1187,8 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
 
     const target = createEventTarget(buttonRef.current);
     target.pointerdown();
-    const secondTarget = createEventTarget(document);
-    // relatedTarget is null when moving focus to window
     expect(onPressStart).toBeCalled();
-    secondTarget.blur({relatedTarget: null});
+    target.blur();
     expect(onPressEnd).toBeCalled();
     target.pointerup();
     expect(onPress).not.toBeCalled();