Manually open/close Combobox (auto complete)

[xsjcTony]

Just as simple as described in the title, maybe via a ref or something.

It's a little bit frustrating currently to achieve it

• If I use CSS to control it (hidden or invisible), it will result in clicking on options does nothing (value does not change)
• If I simulate an click() on the Combox.Button in onFocus, the dropdown will still remain open after I clicked an option by mouse

In conclusion one way always leads to some other issues, so I'm afraid I have to raise a feature request here to get the official support

[sarahdayan]

I needed to manually close the combobox because I had an item in there that wasn't part of the options, but a link at the bottom.

Initially I had the link placed inside <ComboboxOptions>, which caused the combobox to stay open when clicked.

I moved it outside (while controlling its display with an external wrapper + the open render prop) but clicking caused the combobox to immediately close, even before processing the click event.

I didn't want to rely on a setTimeout hack which would be quite unreliable. I ended up patching the library with patch-package to expose an onClose handler in render props.

• Relevant code section

  headlessui/packages/@headlessui-react/src/components/combobox/combobox.tsx

  Lines 898 to 905 in 0b8deaf

  	return {
  	open: comboboxState === ComboboxState.Open,
  	disabled,
  	invalid: data.invalid,
  	hover,
  	focus,
  	autofocus: autoFocus,
  	} satisfies InputRenderPropArg

• Close handler

  headlessui/packages/@headlessui-react/src/components/combobox/combobox.tsx

  Line 136 in 0b8deaf

  let machine = useComboboxMachineContext('VirtualProvider')

I'm not a fan of carrying patches around in projects because it keeps me from confidently updating dependencies, but if you really need this, it can do the job until an official solution comes up.