Fix sensitivity while scrolling (#3190)

2 files changed, 9 insertions, 0 deletions

diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index 2004ee7c6..47193bce0 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -119,6 +119,10 @@ export function Trigger({children, label}: TriggerProps) {
             },
             props: {
               ...props,
+              // disable on web, use `onPress`
+              onPointerDown: () => false,
+              onPress: () =>
+                control.isOpen ? control.close() : control.open(),
               onFocus: onFocus,
               onBlur: onBlur,
               onMouseEnter,
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index 7d04a3344..e710971ee 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -23,6 +23,10 @@ export type RadixPassThroughTriggerProps = {
   ['aria-haspopup']?: boolean
   ['aria-expanded']?: AccessibilityProps['aria-expanded']
   onKeyDown: (e: React.KeyboardEvent) => void
+  /**
+   * Radix provides this, but we override on web to use `onPress` instead,
+   * which is less sensitive while scrolling.
+   */
   onPointerDown: PressableProps['onPointerDown']
 }
 export type TriggerProps = {
@@ -69,6 +73,7 @@ export type TriggerChildProps =
         pressed: false
       }
       props: RadixPassThroughTriggerProps & {
+        onPress: () => void
         onFocus: () => void
         onBlur: () => void
         onMouseEnter: () => void