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, })