You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
let inputRef = useSyncRefs(
internalInputRef, // <-- <input>
ref,
useFloatingReference(), // <-- The element the floating panel aligns with
actions.setInputElement
)
This makes it very difficult to create this use case, requiring us to fill the component with the input, position everything absolutely, and constantly calculate the input padding based on the space used by the surrounding elements.
As a user, how would I like this to work?
Some options are available:
Create a new component such as ComboboxControlGroup to indicate the area that needs alignment, similar to how PopoverGroup groups buttons
Add a property to ComboboxOptions' anchor prop for explicitly setting the reference of the floating panel, effectively the same as setReference from Floating UI
The text was updated successfully, but these errors were encountered:
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
2.1.9
What browser are you using?
N/A
Reproduction URL
https://codesandbox.io/p/devbox/headless-ui-combobox-layout-sqqh6f
Describe your issue
Some designs include elements around the text input of the combobox, such as selected options, a clear button and the popover indicator button.
HeadlessUI unfortunately hardcodes the floating reference to the input element, not allowing customization:
https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/combobox/combobox.tsx#L1053
This makes it very difficult to create this use case, requiring us to fill the component with the input, position everything absolutely, and constantly calculate the input padding based on the space used by the surrounding elements.
As a user, how would I like this to work?
Some options are available:
ComboboxControlGroup
to indicate the area that needs alignment, similar to howPopoverGroup
groups buttonsComboboxOptions
'anchor
prop for explicitly setting the reference of the floating panel, effectively the same assetReference
from Floating UIThe text was updated successfully, but these errors were encountered: