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 ;
+ };
+ ReactDOM.render(, 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
index 381fed4a7fad1..479e2b31ea386 100644
--- 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();