Listbox (select) bug.

[ahmedalashhab]

Hi,
I am currently utilising the Listbox(select) component from Headless UI (https://headlessui.com/react/listbox) in React.
The Listbox only leaves a checkmark and selects the <Listbox.Option> for me when the value of the Listbox.option and the content of the span of the Listbox.Option are identical. Otherwise, the option fails to be properly selected and the check mark fails to show. Is there a way to edit the component package so that it checks that the span of the Listbox.option and the key of the Listbox.option are identical instead?

Please find an image below that illustrates the issue that I am currently facing.

In other words, the value of my Listbox.option is {episode} while the content of the Span of Listbox.option is {episode.number}. I have tested different vars and found that when both of these vars are identicial, the issue is solved. However, for my code to work as intended, these values must be as they currently are.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

It's a bit hard to debug without a reproduction repo, but I have a feeling that the by prop will help you out.

My guess is that your value on the Listbox looks similar to the value of the Listbox.Option but isn't the exact same reference.

I would recommend you to read this part of the documentation: https://headlessui.com/react/listbox#binding-objects-as-values

[ahmedalashhab]

That solved it. Thank you.