From 025e1152775c311df85748ccefefdeb78d7e72ff Mon Sep 17 00:00:00 2001 From: Dan Thompson <7358641+danthomps@users.noreply.github.com> Date: Wed, 29 May 2024 07:21:44 -0500 Subject: [PATCH] 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 --- packages/@headlessui-react/CHANGELOG.md | 1 + .../src/components/combobox/combobox.tsx | 25 +++++++++++-------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 76c0fc5..b8eab99 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Keep `` open when clicking scrollbar in `` ([#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 `` 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 diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index bab5dd7..638f2e8 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -1671,21 +1671,26 @@ function OptionsFn( }, [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 `` - // inside of a ``, clicking the scrollbar of the `` - // will move focus to the `` which blurs the `` and - // closes the ``. - // - // 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 `` + // inside of a ``, clicking the scrollbar of the `` + // will move focus to the `` which blurs the `` and + // closes the ``. + // + // 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 ``, 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( '--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, })