Skip to content

Commit 1a440e1

Browse files
Fix issues with scrolling in a virtual combobox (#3163)
* Scrolling to active option in combobox after opening when last option was selected with the mouse * Allow virtual combobox to scroll freely with mouse wheel after changing options with keyboard * Update changelog
1 parent db702a7 commit 1a440e1

File tree

2 files changed

+15
-0
lines changed

2 files changed

+15
-0
lines changed

packages/@headlessui-react/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3333
- Fix anchored elements not flipping when there is padding ([#3157](https://github.com/tailwindlabs/headlessui/pull/3157))
3434
- Render virtual items during an exiting transition ([#3160](https://github.com/tailwindlabs/headlessui/pull/3160))
3535
- Only render virtual options wrapper when there are items to show ([#3161](https://github.com/tailwindlabs/headlessui/pull/3161))
36+
- Fix issues with scrolling to / around the active option in a virtual combobox ([#3163](https://github.com/tailwindlabs/headlessui/pull/3163))
3637

3738
### Changed
3839

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,13 @@ let reducers: {
196196
...state,
197197
activeOptionIndex: null,
198198
comboboxState: ComboboxState.Closed,
199+
200+
// Clear the last known activation trigger
201+
// This is because if a user interacts with the combobox using a mouse
202+
// resulting in it closing we might incorrectly handle the next interaction
203+
// for example, not scrolling to the active option in a virtual list
204+
activationTrigger: ActivationTrigger.Other,
205+
199206
__demoMode: false,
200207
}
201208
},
@@ -1651,6 +1658,12 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
16511658
} satisfies OptionsRenderPropArg
16521659
}, [data])
16531660

1661+
// When the user scrolls **using the mouse** (so scroll event isn't appropriate)
1662+
// we want to make sure that the current activation trigger is set to pointer
1663+
let handleWheel = useEvent(() => {
1664+
actions.setActivationTrigger(ActivationTrigger.Pointer)
1665+
})
1666+
16541667
let ourProps = mergeProps(anchor ? getFloatingPanelProps() : {}, {
16551668
'aria-labelledby': labelledBy,
16561669
role: 'listbox',
@@ -1662,6 +1675,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
16621675
'--input-width': useElementSize(data.inputRef, true).width,
16631676
'--button-width': useElementSize(data.buttonRef, true).width,
16641677
} as CSSProperties,
1678+
onWheel: handleWheel,
16651679
})
16661680

16671681
// Map the children in a scrollable container when virtualization is enabled

0 commit comments

Comments
 (0)