Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issues with scrolling in a virtual combobox #3163

Merged
merged 3 commits into from
May 1, 2024
Merged

Fix issues with scrolling in a virtual combobox #3163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94ecee7
Scrolling to active option in combobox after opening when last option…
thecrypticace May 1, 2024
6294cfc
Allow virtual combobox to scroll freely with mouse wheel after changi…
thecrypticace May 1, 2024
ceebb11
Update changelog
thecrypticace May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix anchored elements not flipping when there is padding ([#3157](https://github.com/tailwindlabs/headlessui/pull/3157))
- Render virtual items during an exiting transition ([#3160](https://github.com/tailwindlabs/headlessui/pull/3160))
- Only render virtual options wrapper when there are items to show ([#3161](https://github.com/tailwindlabs/headlessui/pull/3161))
- Fix issues with scrolling to / around the active option in a virtual combobox ([#3163](https://github.com/tailwindlabs/headlessui/pull/3163))

### Changed

Expand Down
14 changes: 14 additions & 0 deletions packages/@headlessui-react/src/components/combobox/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,13 @@ let reducers: {
...state,
activeOptionIndex: null,
comboboxState: ComboboxState.Closed,

// Clear the last known activation trigger
// This is because if a user interacts with the combobox using a mouse
// resulting in it closing we might incorrectly handle the next interaction
// for example, not scrolling to the active option in a virtual list
activationTrigger: ActivationTrigger.Other,

__demoMode: false,
}
},
Expand Down Expand Up @@ -1651,6 +1658,12 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
} satisfies OptionsRenderPropArg
}, [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
let handleWheel = useEvent(() => {
actions.setActivationTrigger(ActivationTrigger.Pointer)
})

let ourProps = mergeProps(anchor ? getFloatingPanelProps() : {}, {
'aria-labelledby': labelledBy,
role: 'listbox',
Expand All @@ -1662,6 +1675,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,
})

// Map the children in a scrollable container when virtualization is enabled
Expand Down
Loading