diff --git a/packages/react-events/src/dom/Press.js b/packages/react-events/src/dom/Press.js index 3a08adc280c23..2b4858d3746c8 100644 --- a/packages/react-events/src/dom/Press.js +++ b/packages/react-events/src/dom/Press.js @@ -43,6 +43,7 @@ type PressState = { y: number, |}>, addedRootEvents: boolean, + buttons: 0 | 1 | 4, isActivePressed: boolean, isActivePressStart: boolean, isPressed: boolean, @@ -149,9 +150,9 @@ function createPressEvent( event: ?ReactDOMResponderEvent, touchEvent: null | Touch, defaultPrevented: boolean, + state: PressState, ): PressEvent { const timeStamp = context.getTimeStamp(); - let buttons = 1; let clientX = null; let clientY = null; let pageX = null; @@ -171,20 +172,12 @@ function createPressEvent( let eventObject; eventObject = (touchEvent: any) || (nativeEvent: any); if (eventObject) { - ({ - buttons, - clientX, - clientY, - pageX, - pageY, - screenX, - screenY, - } = eventObject); + ({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject); } } return { altKey, - buttons, + buttons: state.buttons, clientX, clientY, ctrlKey, @@ -226,6 +219,7 @@ function dispatchEvent( event, touchEvent, defaultPrevented, + state, ); context.dispatchEvent(syntheticEvent, listener, eventPriority); } @@ -493,6 +487,7 @@ const pressResponderImpl = { return { activationPosition: null, addedRootEvents: false, + buttons: 0, isActivePressed: false, isActivePressStart: false, isPressed: false, @@ -586,7 +581,7 @@ const pressResponderImpl = { state.activePointerId = touchEvent.identifier; } - // Ignore any device buttons except primary/secondary and touch/pen contact. + // Ignore any device buttons except primary/middle and touch/pen contact. // Additionally we ignore primary-button + ctrl-key with Macs as that // acts like right-click and opens the contextmenu. if ( @@ -606,6 +601,7 @@ const pressResponderImpl = { } state.responderRegionOnDeactivation = null; state.isPressWithinResponderRegion = true; + state.buttons = nativeEvent.buttons; dispatchPressStartEvents(event, context, props, state); addRootEventTypes(context, state); } else { @@ -709,7 +705,7 @@ const pressResponderImpl = { case 'mouseup': case 'touchend': { if (isPressed) { - const buttons = nativeEvent.buttons; + const buttons = state.buttons; let isKeyboardEvent = false; let touchEvent; if (type === 'pointerup' && activePointerId !== pointerId) { 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 34e483e5a54cc..ea4aa15aaa815 100644 --- a/packages/react-events/src/dom/__tests__/Press-test.internal.js +++ b/packages/react-events/src/dom/__tests__/Press-test.internal.js @@ -136,7 +136,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => { const target = createEventTarget(node); target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100}); target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'}); - target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'}); + target.pointerup({pointerType: 'mouse'}); target.pointerhover({x: 110, y: 110}); target.pointerhover({x: 50, y: 50}); expect(onPressStart).toHaveBeenCalledTimes(1); @@ -216,7 +216,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => { it('is called after middle-button pointer up', () => { const target = createEventTarget(ref.current); target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'}); - target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'}); + target.pointerup({pointerType: 'mouse'}); expect(onPressEnd).toHaveBeenCalledTimes(1); expect(onPressEnd).toHaveBeenCalledWith( expect.objectContaining({ @@ -357,7 +357,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => { it('is not called after middle-button press', () => { const target = createEventTarget(ref.current); target.pointerdown({buttons: buttonsType.middle, pointerType: 'mouse'}); - target.pointerup({buttons: buttonsType.middle, pointerType: 'mouse'}); + target.pointerup({pointerType: 'mouse'}); expect(onPress).not.toHaveBeenCalled(); }); diff --git a/packages/react-events/src/dom/testing-library/domEvents.js b/packages/react-events/src/dom/testing-library/domEvents.js index 288884531f4f3..010b0c345ad8b 100644 --- a/packages/react-events/src/dom/testing-library/domEvents.js +++ b/packages/react-events/src/dom/testing-library/domEvents.js @@ -329,8 +329,8 @@ export function pointerover(payload) { export function pointerup(payload) { return createPointerEvent('pointerup', { - buttons: buttonsType.none, ...payload, + buttons: buttonsType.none, }); } @@ -367,8 +367,8 @@ export function mouseover(payload) { export function mouseup(payload) { return createMouseEvent('mouseup', { - buttons: buttonsType.none, ...payload, + buttons: buttonsType.none, }); }