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.

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

Combobox aligns popover to the input element, making layouts that add elements around the input impossible #3515

Open
WesSouza opened this issue Oct 9, 2024 · 0 comments

Comments

@WesSouza
Copy link

WesSouza commented Oct 9, 2024

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant