Avoid scrollToIndex when using native scrollbar in ComboBox

tailwindlabs · May 9, 2024 · 86c8a82 · 86c8a82
1 parent 031b39d
commit 86c8a82
Showing 1 changed file with 9 additions and 0 deletions.
diff --git 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