Skip to content

Commit

Permalink
Fix issues with scrolling in a virtual combobox (#3163)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
thecrypticace authored May 1, 2024
1 parent db702a7 commit 1a440e1
Showing 2 changed files with 15 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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

14 changes: 14 additions & 0 deletions packages/@headlessui-react/src/components/combobox/combobox.tsx
Original file line number Diff line number Diff line change
@@ -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,
}
},
@@ -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',
@@ -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

0 comments on commit 1a440e1

Please sign in to comment.