[react-interactions] fix Press/Tap behavior for virtual middle clicks

Tools like BetterTouchTool for macOS trigger middle-clicks with a 'buttons'
value that doesn't correspond to the middle-mouse button. To account for this
we also inspect the value of 'button'.

Close #17367

Author: Nicolas Gallagher

packages/react-interactions/events/src/dom/PressLegacy.js

@@ -626,6 +626,9 @@ const pressResponderImpl = {
           state.responderRegionOnDeactivation = null;
           state.isPressWithinResponderRegion = true;
           state.buttons = nativeEvent.buttons;
+          if (nativeEvent.button === 1) {
+            state.buttons = 4;
+          }
           dispatchPressStartEvents(event, context, props, state);
           addRootEventTypes(context, state);
         } else {

packages/react-interactions/events/src/dom/Tap.js

@@ -520,10 +520,14 @@ const responderImpl = {
           }
 
           const activate = shouldActivate(event);
-          const activateAuxiliary = isAuxiliary(nativeEvent.buttons, event);
+          const buttons =
+            nativeEvent.button === 1
+              ? buttonsEnum.auxiliary
+              : nativeEvent.buttons;
+          const activateAuxiliary = isAuxiliary(buttons, event);
 
           if (activate || activateAuxiliary) {
-            state.buttons = nativeEvent.buttons;
+            state.buttons = buttons;
             state.pointerType = event.pointerType;
             state.responderTarget = context.getResponderNode();
             addRootEventTypes(rootEventTypes, context, state);

packages/react-interactions/events/src/dom/__tests__/Press-test.internal.js

@@ -10,6 +10,7 @@
 'use strict';
 
 import {
+  buttonType,
   buttonsType,
   createEventTarget,
   describeWithPointerEvent,
@@ -126,7 +127,30 @@ describeWithPointerEvent('Press responder', hasPointerEvents => {
     it('is called after middle-button pointer down', () => {
       const target = createEventTarget(ref.current);
       const pointerType = 'mouse';
-      target.pointerdown({buttons: buttonsType.auxiliary, pointerType});
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: buttonsType.auxiliary,
+        pointerType,
+      });
+      target.pointerup({pointerType});
+      expect(onPressStart).toHaveBeenCalledTimes(1);
+      expect(onPressStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressstart',
+        }),
+      );
+    });
+
+    it('is called after virtual middle-button pointer down', () => {
+      const target = createEventTarget(ref.current);
+      const pointerType = 'mouse';
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType,
+      });
       target.pointerup({pointerType});
       expect(onPressStart).toHaveBeenCalledTimes(1);
       expect(onPressStart).toHaveBeenCalledWith(
@@ -212,6 +236,7 @@ describeWithPointerEvent('Press responder', hasPointerEvents => {
     it('is called after middle-button pointer up', () => {
       const target = createEventTarget(ref.current);
       target.pointerdown({
+        button: buttonType.auxiliary,
         buttons: buttonsType.auxiliary,
         pointerType: 'mouse',
       });
@@ -226,6 +251,24 @@ describeWithPointerEvent('Press responder', hasPointerEvents => {
       );
     });
 
+    it('is called after virtual middle-button pointer up', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPressEnd).toHaveBeenCalledTimes(1);
+      expect(onPressEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          buttons: buttonsType.auxiliary,
+          pointerType: 'mouse',
+          type: 'pressend',
+        }),
+      );
+    });
+
     it('is called after "keyup" event for Enter', () => {
       const target = createEventTarget(ref.current);
       target.keydown({key: 'Enter'});
@@ -356,13 +399,25 @@ describeWithPointerEvent('Press responder', hasPointerEvents => {
     it('is not called after middle-button press', () => {
       const target = createEventTarget(ref.current);
       target.pointerdown({
+        button: buttonType.auxiliary,
         buttons: buttonsType.auxiliary,
         pointerType: 'mouse',
       });
       target.pointerup({pointerType: 'mouse'});
       expect(onPress).not.toHaveBeenCalled();
     });
 
+    it('is not called after virtual middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
     it('is called after valid "keyup" event', () => {
       const target = createEventTarget(ref.current);
       target.keydown({key: 'Enter'});

packages/react-interactions/events/src/dom/__tests__/PressLegacy-test.internal.js

@@ -10,6 +10,7 @@
 'use strict';
 
 import {
+  buttonType,
   buttonsType,
   createEventTarget,
   setPointerEvent,
@@ -122,6 +123,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
     it('is called after middle-button pointer down', () => {
       const target = createEventTarget(ref.current);
       target.pointerdown({
+        button: buttonType.auxiliary,
         buttons: buttonsType.auxiliary,
         pointerType: 'mouse',
       });
@@ -140,6 +142,7 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
       const target = createEventTarget(node);
       target.setBoundingClientRect({x: 0, y: 0, width: 100, height: 100});
       target.pointerdown({
+        button: buttonType.auxiliary,
         buttons: buttonsType.auxiliary,
         pointerType: 'mouse',
       });
@@ -374,6 +377,17 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
       expect(onPress).not.toHaveBeenCalled();
     });
 
+    it('is not called after virtual middle-button press', () => {
+      const target = createEventTarget(ref.current);
+      target.pointerdown({
+        button: buttonType.auxiliary,
+        buttons: 0,
+        pointerType: 'mouse',
+      });
+      target.pointerup({pointerType: 'mouse'});
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
     it('is called after valid "keyup" event', () => {
       const target = createEventTarget(ref.current);
       target.keydown({key: 'Enter'});