[react-events] Fix middle-click for Press (#16546)

Browsers always report 'buttons' as 0 when a pointer is released.

Author: necolas

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) {

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();
     });
 

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,
   });
 }