diff --git a/packages/react-events/src/dom/Press.js b/packages/react-events/src/dom/Press.js index 4f54bae692..f92b926c88 100644 --- a/packages/react-events/src/dom/Press.js +++ b/packages/react-events/src/dom/Press.js @@ -893,6 +893,7 @@ const PressResponder: ReactDOMEventResponder = { case 'mouseup': case 'touchend': { if (isPressed) { + const button = nativeEvent.button; let isKeyboardEvent = false; let touchEvent; if (type === 'pointerup' && activePointerId !== pointerId) { @@ -911,6 +912,9 @@ const PressResponder: ReactDOMEventResponder = { } isKeyboardEvent = true; removeRootEventTypes(context, state); + } else if (button === 1) { + // Remove the root events here as no 'click' event is dispatched when this 'button' is pressed. + removeRootEventTypes(context, state); } // Determine whether to call preventDefault on subsequent native events. @@ -968,10 +972,7 @@ const PressResponder: ReactDOMEventResponder = { state, ); } - if ( - state.isPressWithinResponderRegion && - nativeEvent.button !== 1 - ) { + if (state.isPressWithinResponderRegion && button !== 1) { if ( !( wasLongPressed && diff --git a/packages/react-events/src/dom/__tests__/Press-test.internal.js b/packages/react-events/src/dom/__tests__/Press-test.internal.js index 8a93a1a6f8..f5f2f7db4f 100644 --- a/packages/react-events/src/dom/__tests__/Press-test.internal.js +++ b/packages/react-events/src/dom/__tests__/Press-test.internal.js @@ -150,6 +150,48 @@ describe('Event responder: Press', () => { ); }); + it('is not called after "pointermove" following auxillary-button press', () => { + ref.current.getBoundingClientRect = () => ({ + top: 0, + left: 0, + bottom: 100, + right: 100, + }); + ref.current.dispatchEvent( + createEvent('pointerdown', { + button: 1, + pointerType: 'mouse', + clientX: 50, + clientY: 50, + }), + ); + ref.current.dispatchEvent( + createEvent('pointerup', { + button: 1, + pointerType: 'mouse', + clientX: 50, + clientY: 50, + }), + ); + container.dispatchEvent( + createEvent('pointermove', { + button: 1, + pointerType: 'mouse', + clientX: 110, + clientY: 110, + }), + ); + container.dispatchEvent( + createEvent('pointermove', { + button: 1, + pointerType: 'mouse', + clientX: 50, + clientY: 50, + }), + ); + expect(onPressStart).toHaveBeenCalledTimes(1); + }); + it('ignores browser emulated events', () => { ref.current.dispatchEvent(createEvent('pointerdown')); ref.current.dispatchEvent(createEvent('touchstart'));