Don't open Combobox when touching the ComboboxButton while dragging on mobile (#3795)

This PR fixes an issue where the `ComboboxButton` would open the
`Combobox` when you accidentally touched it while scrolling on a touch
device.

To solve this we only handle the `pointerdown` event when using a
`mouse` pointer type. But when it's a different pointer type (like
`touch` or `pen`) then we will use the classic `click` event to open the
`Combobox` instead.

We already applied this logic to the `Listbox` and `Menu` components.
This now solves it for the `ComboboxButton` as well.

To prevent diverging behavior in the future, this now uses a shared hook
that handles this logic.


## Test plan

Here is a little before and after video on mobile. In both scenario's
I'm dragging the page to scroll up and down on the button area.

**Before:**

It essentially immediately opens the moment you touch it.


https://github.com/user-attachments/assets/220222f1-c678-4ff6-a398-b51145dc3a78


**After:**

It only opens when you actually tap it, not when you accidentally touch
it while dragging.



https://github.com/user-attachments/assets/445be498-afd0-429e-99ca-c76aee544d32

The only time it actually opens is when I intentionally tap on the
button.



Fixes: #3793

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Improve focus management in shadow DOM roots ([#3794](https://github.com/tailwindlabs/headlessui/pull/3794))
+- Don't accidentally open the `Combobox` when touching the `ComboboxButton` while dragging on mobile ([#3795](https://github.com/tailwindlabs/headlessui/pull/3795))
 
 ## [2.2.8] - 2025-09-12
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -17,7 +17,6 @@ import React, {
   type FocusEvent as ReactFocusEvent,
   type KeyboardEvent as ReactKeyboardEvent,
   type MouseEvent as ReactMouseEvent,
-  type PointerEvent as ReactPointerEvent,
   type Ref,
 } from 'react'
 import { flushSync } from 'react-dom'
@@ -28,6 +27,7 @@ import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
+import { useHandleToggle } from '../../hooks/use-handle-toggle'
 import { useId } from '../../hooks/use-id'
 import { useInertOthers } from '../../hooks/use-inert-others'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -62,7 +62,6 @@ import { stackMachines } from '../../machines/stack-machine'
 import { useSlice } from '../../react-glue'
 import type { EnsureArray, Props } from '../../types'
 import { history } from '../../utils/active-element-history'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
 import * as DOM from '../../utils/dom'
@@ -1088,24 +1087,11 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let handlePointerDown = useEvent((event: ReactPointerEvent<HTMLButtonElement>) => {
-    // We use the `pointerdown` event here since it fires before the focus
-    // event, allowing us to cancel the event before focus is moved from the
-    // `ComboboxInput` to the `ComboboxButton`. This keeps the input focused,
-    // preserving the cursor position and any text selection.
-    event.preventDefault()
-
-    if (isDisabledReactIssue7711(event.currentTarget)) return
-
-    // Since we're using the `mousedown` event instead of a `click` event here
-    // to preserve the focus of the `ComboboxInput`, we need to also check
-    // that the `left` mouse button was clicked.
-    if (event.button === MouseButton.Left) {
-      if (machine.state.comboboxState === ComboboxState.Open) {
-        machine.actions.closeCombobox()
-      } else {
-        machine.actions.openCombobox()
-      }
+  let toggleProps = useHandleToggle(() => {
+    if (machine.state.comboboxState === ComboboxState.Open) {
+      machine.actions.closeCombobox()
+    } else {
+      machine.actions.openCombobox()
     }
 
     // Ensure we focus the input
@@ -1139,9 +1125,9 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       'aria-labelledby': labelledBy,
       disabled: disabled || undefined,
       autoFocus,
-      onPointerDown: handlePointerDown,
       onKeyDown: handleKeyDown,
     },
+    toggleProps,
     focusProps,
     hoverProps,
     pressProps

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -15,8 +15,6 @@ import React, {
   type ElementType,
   type MutableRefObject,
   type KeyboardEvent as ReactKeyboardEvent,
-  type MouseEvent as ReactMouseEvent,
-  type PointerEvent as ReactPointerEvent,
   type Ref,
 } from 'react'
 import { flushSync } from 'react-dom'
@@ -27,6 +25,7 @@ import { useDefaultValue } from '../../hooks/use-default-value'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
+import { useHandleToggle } from '../../hooks/use-handle-toggle'
 import { useId } from '../../hooks/use-id'
 import { useInertOthers } from '../../hooks/use-inert-others'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -59,7 +58,6 @@ import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-cl
 import { stackMachines } from '../../machines/stack-machine'
 import { useSlice } from '../../react-glue'
 import type { EnsureArray, Props } from '../../types'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
 import * as DOM from '../../utils/dom'
@@ -84,7 +82,6 @@ import {
 import { useDescribedBy } from '../description/description'
 import { Keys } from '../keyboard'
 import { Label, useLabelledBy, useLabels, type _internal_ComponentLabel } from '../label/label'
-import { MouseButton } from '../mouse'
 import { Portal } from '../portal/portal'
 import { ActionTypes, ActivationTrigger, ListboxStates, ValueMode } from './listbox-machine'
 import { ListboxContext, useListboxMachine, useListboxMachineContext } from './listbox-machine-glue'
@@ -420,9 +417,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let toggle = useEvent((event: ReactPointerEvent | ReactMouseEvent) => {
-    if (event.button !== MouseButton.Left) return // Only handle left clicks
-    if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+  let toggleProps = useHandleToggle((event) => {
     if (machine.state.listboxState === ListboxStates.Open) {
       flushSync(() => machine.actions.closeListbox())
       machine.state.buttonElement?.focus({ preventScroll: true })
@@ -432,18 +427,6 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let pointerTypeRef = useRef<'touch' | 'mouse' | 'pen' | null>(null)
-  let handlePointerDown = useEvent((event: ReactPointerEvent) => {
-    pointerTypeRef.current = event.pointerType
-    if (event.pointerType !== 'mouse') return
-    toggle(event)
-  })
-
-  let handleClick = useEvent((event: ReactMouseEvent) => {
-    if (pointerTypeRef.current === 'mouse') return
-    toggle(event)
-  })
-
   // This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
   let handleKeyPress = useEvent((event: ReactKeyboardEvent<HTMLElement>) => event.preventDefault())
 
@@ -482,9 +465,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
       onKeyPress: handleKeyPress,
-      onPointerDown: handlePointerDown,
-      onClick: handleClick,
     },
+    toggleProps,
     focusProps,
     hoverProps,
     pressProps

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -12,14 +12,14 @@ import React, {
   type CSSProperties,
   type ElementType,
   type KeyboardEvent as ReactKeyboardEvent,
-  type PointerEvent as ReactPointerEvent,
   type Ref,
 } from 'react'
 import { flushSync } from 'react-dom'
 import { useActivePress } from '../../hooks/use-active-press'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
+import { useHandleToggle } from '../../hooks/use-handle-toggle'
 import { useId } from '../../hooks/use-id'
 import { useInertOthers } from '../../hooks/use-inert-others'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -48,7 +48,6 @@ import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-cl
 import { stackMachines } from '../../machines/stack-machine'
 import { useSlice } from '../../react-glue'
 import type { Props } from '../../types'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Focus } from '../../utils/calculate-active-index'
 import { disposables } from '../../utils/disposables'
 import * as DOM from '../../utils/dom'
@@ -72,7 +71,6 @@ import {
 import { useDescriptions } from '../description/description'
 import { Keys } from '../keyboard'
 import { useLabelContext, useLabels } from '../label/label'
-import { MouseButton } from '../mouse'
 import { Portal } from '../portal/portal'
 import { ActionTypes, ActivationTrigger, MenuState, type MenuItemDataRef } from './menu-machine'
 import { MenuContext, useMenuMachine, useMenuMachineContext } from './menu-machine-glue'
@@ -263,9 +261,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     select: useCallback((target) => target.click(), []),
   })
 
-  let toggle = useEvent((event: ReactPointerEvent) => {
-    if (event.button !== MouseButton.Left) return // Only handle left clicks
-    if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+  let toggleProps = useHandleToggle((event) => {
     if (disabled) return
     if (menuState === MenuState.Open) {
       flushSync(() => machine.send({ type: ActionTypes.CloseMenu }))
@@ -280,18 +276,6 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let pointerTypeRef = useRef<'touch' | 'mouse' | 'pen' | null>(null)
-  let handlePointerDown = useEvent((event: ReactPointerEvent) => {
-    pointerTypeRef.current = event.pointerType
-    if (event.pointerType !== 'mouse') return
-    toggle(event)
-  })
-
-  let handleClick = useEvent((event: ReactPointerEvent) => {
-    if (pointerTypeRef.current === 'mouse') return
-    toggle(event)
-  })
-
   let { isFocusVisible: focus, focusProps } = useFocusRing({ autoFocus })
   let { isHovered: hover, hoverProps } = useHover({ isDisabled: disabled })
   let { pressed: active, pressProps } = useActivePress({ disabled })
@@ -318,9 +302,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       autoFocus,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
-      onPointerDown: handlePointerDown,
-      onClick: handleClick,
     },
+    toggleProps,
     focusProps,
     hoverProps,
     pressProps

packages/@headlessui-react/src/hooks/use-handle-toggle.tsx

@@ -0,0 +1,53 @@
+import { useRef, type PointerEvent as ReactPointerEvent } from 'react'
+import { MouseButton } from '../components/mouse'
+import { isDisabledReactIssue7711 } from '../utils/bugs'
+import { useEvent } from './use-event'
+
+export function useHandleToggle(cb: (event: ReactPointerEvent) => void) {
+  let pointerTypeRef = useRef<'touch' | 'mouse' | 'pen' | null>(null)
+
+  let handlePointerDown = useEvent((event: ReactPointerEvent<HTMLButtonElement>) => {
+    pointerTypeRef.current = event.pointerType
+
+    // Skip disabled elements
+    if (isDisabledReactIssue7711(event.currentTarget)) return
+
+    // We only want to handle mouse events here. Touch and pen events should be
+    // ignored to prevent accidentally blocking scrolling. They will be
+    // handled by the click listener instead.
+    if (event.pointerType !== 'mouse') return
+
+    // We are only interested in left clicks, but because this is a pointerdown
+    // event we have to check this property manually because this is also
+    // fired for right clicks.
+    if (event.button !== MouseButton.Left) return
+
+    // We use the `pointerdown` event here since it fires before the focus
+    // event, allowing us to cancel the event before focus is moved.
+    //
+    // If this is used in a button where the currently focused element is an
+    // `input` then we keep the focus in the `input` instead of moving it to
+    // the button. This preserves the cursor position and any text selection
+    // in the input.
+    event.preventDefault()
+
+    // Finally we are ready to toggle
+    cb(event)
+  })
+
+  let handleClick = useEvent((event: ReactPointerEvent<HTMLButtonElement>) => {
+    // Skip mouse events, they are already handled in the pointerdown handler above.
+    if (pointerTypeRef.current === 'mouse') return
+
+    // Skip disabled elements
+    if (isDisabledReactIssue7711(event.currentTarget)) return
+
+    // Finally we are ready to toggle
+    cb(event)
+  })
+
+  return {
+    onPointerDown: handlePointerDown,
+    onClick: handleClick,
+  }
+}