From 6cf2234a57450fdc19ffa373df9cecfce74fb8c0 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 2 Jul 2019 16:58:46 +0100 Subject: [PATCH] [Flare] Do not block mouse presses on scroll (#16033) --- packages/react-events/src/dom/Press.js | 9 +++++++-- .../src/dom/__tests__/Press-test.internal.js | 20 +++++++++++++++++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/react-events/src/dom/Press.js b/packages/react-events/src/dom/Press.js index c8738521ce..20be59f10c 100644 --- a/packages/react-events/src/dom/Press.js +++ b/packages/react-events/src/dom/Press.js @@ -797,6 +797,7 @@ const PressResponder: ReactDOMEventResponder = { const nativeEvent: any = event.nativeEvent; const isPressed = state.isPressed; const activePointerId = state.activePointerId; + const previousPointerType = state.pointerType; handleStopPropagation(props, context, nativeEvent); switch (type) { @@ -807,7 +808,7 @@ const PressResponder: ReactDOMEventResponder = { let touchEvent; // Ignore emulated events (pointermove will dispatch touch and mouse events) // Ignore pointermove events during a keyboard press. - if (state.pointerType !== pointerType) { + if (previousPointerType !== pointerType) { return; } if (type === 'pointermove' && activePointerId !== pointerId) { @@ -976,7 +977,7 @@ const PressResponder: ReactDOMEventResponder = { case 'click': { // "keyup" occurs after "click" - if (state.pointerType !== 'keyboard') { + if (previousPointerType !== 'keyboard') { removeRootEventTypes(context, state); } break; @@ -984,6 +985,10 @@ const PressResponder: ReactDOMEventResponder = { // CANCEL case 'scroll': { + // We ignore incoming scroll events when using mouse events + if (previousPointerType === 'mouse') { + return; + } const pressTarget = state.pressTarget; const scrollTarget = nativeEvent.target; const doc = context.getActiveDocument(); 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 e7e3b9b117..bbee5b5cae 100644 --- a/packages/react-events/src/dom/__tests__/Press-test.internal.js +++ b/packages/react-events/src/dom/__tests__/Press-test.internal.js @@ -2445,15 +2445,31 @@ describe('Event responder: Press', () => { ); ReactDOM.render(element, container); - ref.current.dispatchEvent(createEvent('pointerdown')); + // Should cancel for non-mouse events + ref.current.dispatchEvent( + createEvent('pointerdown', { + pointerType: 'touch', + }), + ); ref.current.dispatchEvent(createEvent('scroll')); expect(onPressEnd).toHaveBeenCalledTimes(1); jest.runAllTimers(); expect(onLongPress).not.toBeCalled(); - onLongPress.mockReset(); onPressEnd.mockReset(); + // Should not cancel for mouse events + ref.current.dispatchEvent( + createEvent('pointerdown', { + pointerType: 'mouse', + }), + ); + ref.current.dispatchEvent(createEvent('scroll')); + expect(onPressEnd).toHaveBeenCalledTimes(0); + jest.runAllTimers(); + + onLongPress.mockReset(); + // When pointer events are supported ref.current.dispatchEvent( createEvent('pointerdown', {