Fix visual jitter in Combobox component when using native scrollbar (…

…#3190)

* Avoid `scrollToIndex` when using native scrollbar in `ComboBox`

* format comment

* set `ActivationTrigger` in mousedown

If you use the scrollbar, a `mousedown` and `pointerdown` event is fired
before you start interacting with the scrollbar. If you use the `scroll`
event, then the callback is fired while scrolling.

To improve performance a bit more, we will set the activation trigger in
the `mousedown` event because we only need to set it once.

If you are done scrolling, we don't reset it (we didn't do that before
either), but instead we rely on other events to override the trigger
(e.g.: you start using the keyboard).

The big benefit is that this now only calls the `setActivationTrigger`
once, instead of `n` times with the same value.

* optimize `onWheel` to only trigger once

This is a similar performance trick as before. We only need to set the
activationTrigger once, so there is no need to keep calling this
function for no reason.

* update changelog

---------

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

packages/@headlessui-react/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Keep `<Combobox />` open when clicking scrollbar in `<ComboboxOptions>` ([#3249](https://github.com/tailwindlabs/headlessui/pull/3249))
 - Merge incoming `style` prop on `ComboboxOptions`, `ListboxOptions`, `MenuItems`, and `PopoverPanel` components ([#3250](https://github.com/tailwindlabs/headlessui/pull/3250))
 - Prevent focus on `<Checkbox />` when it is `disabled` ([#3251](https://github.com/tailwindlabs/headlessui/pull/3251))
+- Fix visual jitter in `Combobox` component when using native scrollbar ([#3190](https://github.com/tailwindlabs/headlessui/pull/3190))
 
 ## [2.0.4] - 2024-05-25
 

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

@@ -1671,21 +1671,26 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   }, [data])
 
   // When the user scrolls **using the mouse** (so scroll event isn't appropriate)
-  // we want to make sure that the current activation trigger is set to pointer
+  // we want to make sure that the current activation trigger is set to pointer.
   let handleWheel = useEvent(() => {
     actions.setActivationTrigger(ActivationTrigger.Pointer)
   })
 
-  // When clicking inside of the scrollbar, a `click` event will be triggered on
-  // the focusable element _below_ the scrollbar. If you use a `<Combobox>`
-  // inside of a `<Dialog>`, clicking the scrollbar of the `<ComboboxOptions>`
-  // will move focus to the `<Dialog>` which blurs the `<ComboboxInput>` and
-  // closes the `<Combobox>`.
-  //
-  // Preventing the default behavior in the `mousedown` event (which happens
-  // before `click`) will prevent this issue because the `click` never fires.
   let handleMouseDown = useEvent((event: ReactMouseEvent) => {
+    // When clicking inside of the scrollbar, a `click` event will be triggered
+    // on the focusable element _below_ the scrollbar. If you use a `<Combobox>`
+    // inside of a `<Dialog>`, clicking the scrollbar of the `<ComboboxOptions>`
+    // will move focus to the `<Dialog>` which blurs the `<ComboboxInput>` and
+    // closes the `<Combobox>`.
+    //
+    // Preventing the default behavior in the `mousedown` event (which happens
+    // before `click`) will prevent this issue because the `click` never fires.
     event.preventDefault()
+
+    // When the user clicks in the `<Options/>`, we want to make sure that we
+    // set the activation trigger to `pointer` to prevent auto scrolling to the
+    // active option while the user is scrolling.
+    actions.setActivationTrigger(ActivationTrigger.Pointer)
   })
 
   let ourProps = mergeProps(anchor ? getFloatingPanelProps() : {}, {
@@ -1700,7 +1705,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
       '--input-width': useElementSize(data.inputRef, true).width,
       '--button-width': useElementSize(data.buttonRef, true).width,
     } as CSSProperties,
-    onWheel: handleWheel,
+    onWheel: data.activationTrigger === ActivationTrigger.Pointer ? undefined : handleWheel,
     onMouseDown: handleMouseDown,
   })