Combobox: After leaving with "tab" key and switching the selected option outside of the Combobox, the displayed value is not updated

[omarkohl]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.10

What browser are you using?

• Firefox 131.0.3
• Chromium 129.0.6668.100

Reproduction URL

https://github.com/omarkohl/combobox-bug

https://codesandbox.io/p/github/omarkohl/combobox-bug/main?import=true

Describe your issue

1. Click in the Combobox input field
2. Select a person e.g. Arlene Mccoy using the mouse or the keyboard
3. Use the Tab key to exit the Combobox
4. Click on the button "Select Tanya".
5. Observed: Tanya Fox is now the selected person but the Combobox still displays "Arlene Mccoy".
6. Expected: The Combobox should display "Tanya Fox" instead.

The issue does NOT appear if in step 3 you use the mouse to exit the Combobox e.g. by clicking somewhere else or clicking directly on the "Select Tanya" button.

[AMirnes]

We are also using the Combobox and are experiencing the same issue, when tabbing out of the combobox and then selecting a new value, the input does not update. Also when Shift+Tabbing out of the combobox and then selecting a new value, the input does not update. We are on version 2.2.0

[RobinMalfait]

This should be fixed by #3785, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.