Conditional rendering of Combobox.Input fails to update the input props

[JesusTheHun]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v1.6.1

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/react-qwym4h?file=src/App.js

Describe your issue

Using the Combobox children render function, if you return a different instance of Combobox.Input depending on the open render prop, it will not used the new displayValue prop the but first one.

Using the example above, when you open the combobox, in the input you should see the value + "open" and not value + "closed"

[JesusTheHun]

This might be caused by this effect : https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/combobox/combobox.tsx#L614

I think the dependencies array should reference inputPropsRef.current and not inputPropsRef.

[thecrypticace]

Hey, thanks for reporting this. Definitely an unexpectedly weird bug.

This has been fixed by #1679, and will be available in the next release!

You can try it by using our insiders build (may take a couple of minutes to publish):

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[JesusTheHun]

Hello again @RobinMalfait 👋

This is this issue that is still present.
URL : https://stackblitz.com/edit/react-1zmm1p?file=src%2FApp.js

Focus the input, press ⬇️, select an option.
When the dropdown is closed, the title of the option should be suffixed with "closed", this part works, but when the dropdown is open the suffix should be "open". This part is not functioning.