[Bug][Severe] Using Combobox.Input with displayValue breaks the input behaviour

[JesusTheHun]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

Bug found in : 0.0.0-insiders.fa10cb0
Works fine with 1.6.6

What browser are you using?

N/A

Reproduction URL

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

Describe your issue

Focus the input and start editing its value. You will see after a few ms it will return to the value returned by displayValue.
Up to 1.6.6 the behaviour was to keep the user input while he's editing.

May be related to issue #1675, PR #1679.

[thecrypticace]

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

You can already try it using:

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

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you explain your problem a bit more because I am confused about what you mean with "after a few ms" and using your stackblitz with 1.6.6 doesn't seem to explain your issue either.

I simplified the stackblitz a bit using the latest insiders version: https://stackblitz.com/edit/react-cqexep?file=src/App.js

Right now the (expected) behaviour is that if you are typing the contents stays as-is, however if you "cancel" (by clicking outside the Combobox, or pressing escape) then it will reset to whatever the value was.

Is this the behaviour that you expected or did you expect something else?

[JesusTheHun]

Hello @RobinMalfait !

EDIT : this issue seems solved now. I've just found a new one though 😅
EDIT 2 : is it normal that if I focus the input and remove a character, it opens the dropdown and remove the focus from the input ?

[RobinMalfait]

@JesusTheHun awesome that it works now!

EDIT 2 : is it normal that if I focus the input and remove a character, it opens the dropdown and remove the focus from the input ?

Yes and no, typing opens the combobox which is expected behaviour because it then starts filtering. Losing the input focus sounds wrong but it can happen if you render a different input then you rendered before (like a different React tree altogether that was unmounted & re-mounted). You can solve this in 2 ways:

1. Don't render 2 different trees conditionally, but change properties on the same tree.
2. Use the key prop to trick React that it is actually the "same" tree even though it is a different tree.

[JesusTheHun]

1. That's the ideal way, of course. But the readability & maintainability can be hard to achieve, especially when the render tree is completely different, not just props on the input.

2. I use that trick once in a while, but it ends up being a bad idea most of the time.

Check this : https://stackblitz.com/edit/react-1zmm1p?file=src%2FApp.js
Select an entry. Then focus the input and clear it, then blur. It displays "open".
I'm not sure if it's a React thing or a HUI thing, because we can see the text has changed.

[RobinMalfait]

@JesusTheHun This should be fixed by #2090, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders.

I've updated your stackblitz reproduction with the latest insiders build: https://stackblitz.com/edit/react-drzwin

[JesusTheHun]

@RobinMalfait thanks! Any ETA for the next release ?

[RobinMalfait]

@JesusTheHun we are doing a bunch of cleanup this week, so I would say by the end of the week.