diff options
| -rw-r--r-- | src/components/Menu/index.web.tsx | 4 | ||||
| -rw-r--r-- | src/components/Menu/types.ts | 5 |
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 |