From 86c8a82955948c5caeaa52d826bb064926d9f414 Mon Sep 17 00:00:00 2001
From: Dan Thompson <dan@danthomp.com>
Date: Thu, 9 May 2024 00:51:12 -0500
Subject: [PATCH] Avoid `scrollToIndex` when using native scrollbar in
 `ComboBox`

---
 .../src/components/combobox/combobox.tsx                 | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 9f8756b901..497cba4c5f 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1663,6 +1663,14 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     actions.setActivationTrigger(ActivationTrigger.Pointer)
   })
 
+  // When the user scrolls **using the native scrollbar**, the only event fired is
+  // the onScroll event. We need to make sure to set the current activation
+  // trigger to pointer, in order to let them scroll through the list.
+  let handleScroll = useEvent(() => {
+    if (isMobile()) return
+    actions.setActivationTrigger(ActivationTrigger.Pointer)
+  })
+
   let ourProps = mergeProps(anchor ? getFloatingPanelProps() : {}, {
     'aria-labelledby': labelledBy,
     role: 'listbox',
@@ -1675,6 +1683,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
       '--button-width': useElementSize(data.buttonRef, true).width,
     } as CSSProperties,
     onWheel: handleWheel,
+    onScroll: handleScroll,
   })
 
   // Map the children in a scrollable container when virtualization is enabled