diff --git a/packages/react-interactions/events/src/dom/PressLegacy.js b/packages/react-interactions/events/src/dom/PressLegacy.js index d2c8c3d031b79..c9791ce3d7b4f 100644 --- 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 index dc0032abc879a..9d81531099f8a 100644 --- 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 index e9245fbb53bac..07aa6c5e3bdce 100644 --- 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