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

[WesSouza]

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