feat(0.81): handle right clicks properly (#2900)

## Summary
Backport of #2885 to 0.81-stable.

- Add `onAuxClick` event for right-click and middle-click handling on
macOS
- Add `onClick` event for left single-click on plain Views
- Fix `onAuxClick` prop registration in iterator-based setProp path
- Override `rightMouseDown:` to prevent context menu modal from stealing
`rightMouseUp:`
- Add `otherMouseDown:`/`otherMouseUp:` for middle-click support
- Prevent Pressable visual press feedback on non-primary mouse buttons
- Align with upstream facebook#56298 (shared cross-platform
changes)

## Test plan
- Left-click on View → fires `onClick` with `button=0`
- Double-click on View → fires `onDoubleClick` with `button=0`
- Right-click on View → fires `onAuxClick` with `button=2`
- Middle-click on View → fires `onAuxClick` with `button=1`
- Right-click on Pressable → fires `onAuxClick`, does NOT trigger
`onPress` or visual press state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

docsite/api/view-events.md

@@ -126,6 +126,34 @@ Example:
 
 ---
 
+### `onAuxClick`
+
+Fired when the user clicks on the view with a non-primary button (e.g., right-click or middle-click). This follows the [W3C `auxclick` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event) specification.
+
+**Event Data:** Mouse event with the following properties:
+- `clientX`: Horizontal position in the target view
+- `clientY`: Vertical position in the target view
+- `screenX`: Horizontal position in the window
+- `screenY`: Vertical position in the window
+- `altKey`: Whether Alt/Option key is pressed
+- `ctrlKey`: Whether Control key is pressed
+- `shiftKey`: Whether Shift key is pressed
+- `metaKey`: Whether Command key is pressed
+- `button`: The button number that was pressed (2 for right-click)
+
+Example:
+```javascript
+<View onAuxClick={(event) => {
+  console.log('Right clicked, button:', event.nativeEvent.button);
+}}>
+  <Text>Right click me</Text>
+</View>
+```
+
+> **Note:** Right-clicking a `Pressable` will fire `onAuxClick` but will **not** trigger `onPress`. Only primary (left) button clicks trigger `onPress`.
+
+---
+
 ### `onDoubleClick`
 
 Fired when the user double-clicks on the view.
@@ -139,6 +167,7 @@ Fired when the user double-clicks on the view.
 - `ctrlKey`: Whether Control key is pressed
 - `shiftKey`: Whether Shift key is pressed
 - `metaKey`: Whether Command key is pressed
+- `button`: The button number that was pressed (0 for left-click)
 
 Example:
 ```javascript

packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -44,6 +44,7 @@ const UIView = {
   mouseDownCanMoveWindow: true,
   enableFocusRing: true,
   focusable: true,
+  onAuxClick: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onDoubleClick: true,

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -135,6 +135,8 @@ type MouseEventProps = $ReadOnly<{
 
 // Experimental/Work in Progress Pointer Event Callbacks (not yet ready for use)
 type PointerEventProps = $ReadOnly<{
+  onAuxClick?: ?(event: PointerEvent) => void,
+  onAuxClickCapture?: ?(event: PointerEvent) => void,
   onClick?: ?(event: PointerEvent) => void,
   onClickCapture?: ?(event: PointerEvent) => void,
   onPointerEnter?: ?(event: PointerEvent) => void,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -89,6 +89,12 @@ const bubblingEventTypes = {
   },
 
   // Experimental/Work in Progress Pointer Events (not yet ready for use)
+  topAuxClick: {
+    phasedRegistrationNames: {
+      captured: 'onAuxClickCapture',
+      bubbled: 'onAuxClick',
+    },
+  },
   topClick: {
     phasedRegistrationNames: {
       captured: 'onClickCapture',
@@ -394,6 +400,8 @@ const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
   onTouchCancel: true,
 
   // Pointer events
+  onAuxClick: true,
+  onAuxClickCapture: true,
   onClick: true,
   onClickCapture: true,
   onPointerUp: true,

packages/react-native/Libraries/Pressability/Pressability.js

@@ -410,6 +410,16 @@ export default class Pressability {
   _touchActivateTime: ?number;
   _touchState: TouchState = 'NOT_RESPONDER';
 
+  // [macOS
+  /**
+   * Returns true if the button from a press event is the default (primary/left)
+   * button. A button value of 0 or undefined is considered the default button.
+   */
+  _isDefaultPressButton(button: ?number): boolean {
+    return !button;
+  }
+  // macOS]
+
   constructor(config: PressabilityConfig) {
     this.configure(config);
   }
@@ -554,6 +564,13 @@ export default class Pressability {
           return;
         }
 
+        // [macOS Only fire onPress for primary (left) mouse button clicks.
+        // Non-primary buttons (right, middle) should not trigger onPress.
+        if (!this._isDefaultPressButton(event?.nativeEvent?.button)) {
+          return;
+        }
+        // macOS]
+
         // for non-pointer click events (e.g. accessibility clicks), we should only dispatch when we're the "real" target
         // in particular, we shouldn't respond to clicks from nested pressables
         if (event?.currentTarget !== event?.target) {
@@ -791,28 +808,45 @@ export default class Pressability {
 
     if (isPressInSignal(prevState) && signal === 'LONG_PRESS_DETECTED') {
       const {onLongPress} = this._config;
-      if (onLongPress != null) {
+      if (
+        onLongPress != null &&
+        this._isDefaultPressButton(
+          getTouchFromPressEvent(event).button,
+        ) /* [macOS] */
+      ) {
         onLongPress(event);
       }
     }
 
     const isPrevActive = isActiveSignal(prevState);
     const isNextActive = isActiveSignal(nextState);
 
-    if (!isPrevActive && isNextActive) {
+    // [macOS Don't activate press visual feedback for non-primary mouse buttons
+    // (e.g. right-click, middle-click). They should fire onAuxClick, not onPress.
+    const isPrimaryButton = this._isDefaultPressButton(
+      getTouchFromPressEvent(event).button,
+    );
+    // macOS]
+
+    if (!isPrevActive && isNextActive && isPrimaryButton /* [macOS] */) {
       this._activate(event);
     } else if (isPrevActive && !isNextActive) {
       this._deactivate(event);
     }
 
     if (isPressInSignal(prevState) && signal === 'RESPONDER_RELEASE') {
       // If we never activated (due to delays), activate and deactivate now.
-      if (!isNextActive && !isPrevActive) {
+      if (!isNextActive && !isPrevActive && isPrimaryButton /* [macOS] */) {
         this._activate(event);
         this._deactivate(event);
       }
       const {onLongPress, onPress, android_disableSound} = this._config;
-      if (onPress != null) {
+      if (
+        onPress != null &&
+        this._isDefaultPressButton(
+          getTouchFromPressEvent(event).button,
+        ) /* [macOS] */
+      ) {
         const isPressCanceledByLongPress =
           onLongPress != null && prevState === 'RESPONDER_ACTIVE_LONG_PRESS_IN';
         if (!isPressCanceledByLongPress) {

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -2031,10 +2031,12 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
 enum MouseEventType {
   MouseEnter,
   MouseLeave,
+  Click,
   DoubleClick,
+  AuxClick,
 };
 
-- (void)emitMouseEvent:(MouseEventType)eventType
+- (void)emitMouseEvent:(MouseEventType)eventType button:(int)button
 {
   if (!_eventEmitter) {
     return;
@@ -2054,6 +2056,7 @@ - (void)emitMouseEvent:(MouseEventType)eventType
     .ctrlKey = static_cast<bool>(modifierFlags & NSEventModifierFlagControl),
     .shiftKey = static_cast<bool>(modifierFlags & NSEventModifierFlagShift),
     .metaKey = static_cast<bool>(modifierFlags & NSEventModifierFlagCommand),
+    .button = button,
   };
 
   switch (eventType) {
@@ -2065,12 +2068,25 @@ - (void)emitMouseEvent:(MouseEventType)eventType
       _eventEmitter->onMouseLeave(mouseEvent);
       break;
 
+    case Click:
+      _eventEmitter->onClick(mouseEvent);
+      break;
+
     case DoubleClick:
       _eventEmitter->onDoubleClick(mouseEvent);
       break;
+
+    case AuxClick:
+      _eventEmitter->onAuxClick(mouseEvent);
+      break;
   }
 }
 
+- (void)emitMouseEvent:(MouseEventType)eventType
+{
+  [self emitMouseEvent:eventType button:0];
+}
+
 - (void)updateMouseOverIfNeeded
 {
   // When an enclosing scrollview is scrolled using the scrollWheel or trackpad,
@@ -2185,12 +2201,55 @@ - (void)mouseExited:(NSEvent *)event
 - (void)mouseUp:(NSEvent *)event
 {
   BOOL hasDoubleClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::DoubleClick];
+  BOOL hasClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::Click];
   if (hasDoubleClickEventHandler && event.clickCount == 2) {
-    [self emitMouseEvent :DoubleClick];
+    [self emitMouseEvent:DoubleClick];
+  } else if (hasClickEventHandler && event.clickCount == 1) {
+    [self emitMouseEvent:Click];
   } else {
     [super mouseUp:event];
   }
 }
+
+- (void)rightMouseDown:(NSEvent *)event
+{
+  // Accept rightMouseDown to prevent the default NSView behavior of passing it
+  // up the responder chain (which can trigger a context menu modal loop that
+  // consumes rightMouseUp).
+  BOOL hasAuxClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick];
+  if (!hasAuxClickEventHandler) {
+    [super rightMouseDown:event];
+  }
+}
+
+- (void)rightMouseUp:(NSEvent *)event
+{
+  BOOL hasAuxClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick];
+  if (hasAuxClickEventHandler) {
+    [self emitMouseEvent:AuxClick button:2];
+  } else {
+    [super rightMouseUp:event];
+  }
+}
+
+- (void)otherMouseDown:(NSEvent *)event
+{
+  // Accept otherMouseDown so that otherMouseUp is delivered to this view.
+  BOOL hasAuxClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick];
+  if (!hasAuxClickEventHandler) {
+    [super otherMouseDown:event];
+  }
+}
+
+- (void)otherMouseUp:(NSEvent *)event
+{
+  BOOL hasAuxClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick];
+  if (hasAuxClickEventHandler) {
+    [self emitMouseEvent:AuxClick button:1];
+  } else {
+    [super otherMouseUp:event];
+  }
+}
 #endif // macOS]
 
 - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point

packages/react-native/React/Fabric/RCTSurfacePointerHandler.mm

@@ -703,8 +703,12 @@ - (void)_dispatchActivePointers:(std::vector<ActivePointer>)activePointers event
         }
         case RCTPointerEventTypeEnd: {
           eventEmitter->onPointerUp(pointerEvent);
-          if (pointerEvent.isPrimary && pointerEvent.button == 0 && IsPointerWithinInitialTree(activePointer)) {
-            eventEmitter->onClick(std::move(pointerEvent));
+          if (pointerEvent.isPrimary && pointerEvent.button == 0) {
+            if (IsPointerWithinInitialTree(activePointer)) {
+              eventEmitter->onClick(std::move(pointerEvent));
+            }
+          } else if (IsPointerWithinInitialTree(activePointer)) {
+            eventEmitter->onAuxClick(std::move(pointerEvent));
           }
           break;
         }

packages/react-native/React/Views/RCTView.h

@@ -145,6 +145,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  * (Experimental and unused for Paper) Pointer event handlers.
  */
+@property (nonatomic, assign) RCTBubblingEventBlock onAuxClick;
 @property (nonatomic, assign) RCTBubblingEventBlock onClick;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerCancel;
 @property (nonatomic, assign) RCTBubblingEventBlock onPointerDown;

packages/react-native/React/Views/RCTViewManager.m

@@ -882,6 +882,7 @@ - (void) updateAccessibilityRole:(RCTView *)view withDefaultView:(RCTView *)defa
 RCT_CUSTOM_VIEW_PROPERTY(onTouchCancel, BOOL, RCTView) {}
 
 // Experimental/WIP Pointer Events (not yet ready for use)
+RCT_EXPORT_VIEW_PROPERTY(onAuxClick, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onClick, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerCancel, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPointerDown, RCTBubblingEventBlock)

packages/react-native/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp

@@ -86,6 +86,10 @@ void TouchEventEmitter::onTouchCancel(TouchEvent event) const {
       "touchCancel", std::move(event), RawEvent::Category::ContinuousEnd);
 }
 
+void TouchEventEmitter::onAuxClick(PointerEvent event) const {
+  dispatchPointerEvent("auxClick", std::move(event), RawEvent::Category::Discrete);
+}
+
 void TouchEventEmitter::onClick(PointerEvent event) const {
   dispatchPointerEvent("click", std::move(event), RawEvent::Category::Discrete);
 }