Fix listbox closing immediately after opening on touch devices (#3755)

Fixes #3750

@RobinMalfait is this the right approach?

- [ ] probably need to write a test for this somehow? I feel like a
playwright-style browser test might really be the only way to actually
write this one.

---------

Co-authored-by: Robin Malfait <[email protected]>

Author: thecrypticace

jest/polyfills.ts

@@ -29,6 +29,18 @@ class PointerEvent extends Event {
       // @ts-expect-error JSDOM doesn't support `button` yet...
       this.button = props.button
     }
+
+    if (props.pointerType != null) {
+      // @ts-expect-error JSDOM doesn't support `pointerType` yet...
+      this.pointerType = props.pointerType
+    }
+
+    // @ts-expect-error JSDOM doesn't support `pointerType` yet...
+    if (this.pointerType === undefined) {
+      // Fallback to `pointerType` of `'mouse'` if not provided.
+      // @ts-expect-error JSDOM doesn't support `pointerType` yet...
+      this.pointerType = 'mouse'
+    }
   }
 }
 // @ts-expect-error JSDOM doesn't support `PointerEvent` yet...

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix listbox closing immediately after opening on touch devices ([#3755](https://github.com/tailwindlabs/headlessui/pull/3755))
 
 ## [2.2.4] - 2025-05-20
 

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

@@ -83,6 +83,7 @@ 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'
@@ -434,8 +435,27 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
+  let pointerTypeRef = useRef<'touch' | 'mouse' | 'pen' | null>(null)
   let handlePointerDown = useEvent((event: ReactPointerEvent) => {
-    if (event.button !== 0) return // Only handle left clicks
+    pointerTypeRef.current = event.pointerType
+
+    if (event.pointerType !== 'mouse') return
+
+    if (event.button !== MouseButton.Left) return // Only handle left clicks
+    if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    if (machine.state.listboxState === ListboxStates.Open) {
+      flushSync(() => machine.actions.closeListbox())
+      machine.state.buttonElement?.focus({ preventScroll: true })
+    } else {
+      event.preventDefault()
+      machine.actions.openListbox({ focus: Focus.Nothing })
+    }
+  })
+
+  let handleClick = useEvent((event: ReactPointerEvent) => {
+    if (pointerTypeRef.current === 'mouse') return
+
+    if (event.button !== MouseButton.Left) return // Only handle left clicks
     if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
     if (machine.state.listboxState === ListboxStates.Open) {
       flushSync(() => machine.actions.closeListbox())
@@ -487,6 +507,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       onKeyUp: handleKeyUp,
       onKeyPress: handleKeyPress,
       onPointerDown: handlePointerDown,
+      onClick: handleClick,
     },
     focusProps,
     hoverProps,

playgrounds/react/pages/listbox/listbox-overlaps.tsx

@@ -0,0 +1,81 @@
+import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
+import { useState } from 'react'
+
+let people = [
+  'Wade Cooper',
+  'Arlene Mccoy',
+  'Devon Webb',
+  'Tom Cook',
+  'Tanya Fox',
+  'Hellen Schmidt',
+  'Caroline Schultz',
+  'Mason Heaney',
+  'Claudie Smitham',
+  'Emil Schaefer',
+]
+
+export default function Home() {
+  let [active, setActivePerson] = useState(people[0])
+
+  return (
+    <div className="flex h-full w-screen justify-center bg-gray-50 p-12">
+      <div className="mx-auto w-full max-w-xs">
+        <div className="space-y-1">
+          <Listbox value={active} onChange={setActivePerson}>
+            <Label className="block text-sm font-medium leading-5 text-gray-700">Assigned to</Label>
+
+            <div className="relative">
+              <span className="shadow-xs inline-block w-full rounded-md">
+                <ListboxButton className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out sm:text-sm sm:leading-5">
+                  <span className="block truncate">{active}</span>
+                  <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                    <svg
+                      className="h-5 w-5 text-gray-400"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </ListboxButton>
+              </span>
+
+              <ListboxOptions
+                anchor="selection"
+                transition
+                className="focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 w-(--button-width) overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base leading-6 shadow-lg transition duration-200 ease-out [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
+              >
+                {people.map((name) => (
+                  <ListboxOption
+                    key={name}
+                    value={name}
+                    className="focus:outline-hidden data-active:bg-indigo-600 data-active:text-white group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900"
+                  >
+                    <span className="group-data-selected:font-semibold block truncate font-normal">
+                      {name}
+                    </span>
+                    <span className="group-data-active:text-white group-data-selected:flex absolute inset-y-0 right-0 hidden items-center pr-4 text-indigo-600">
+                      <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </ListboxOption>
+                ))}
+              </ListboxOptions>
+            </div>
+          </Listbox>
+        </div>
+      </div>
+    </div>
+  )
+}