Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Listbox loses track of current checked item when data array was changed after re-focus #1650

Closed
Zerebokep opened this issue Jul 7, 2022 · 1 comment
Assignees

Comments

@Zerebokep
Copy link

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v1.6.5

What browser are you using?

Chrome

Reproduction URL

https://tailwindui.com/components/application-ui/forms/select-menus

Describe your issue

Add an entry to the people array, refocus browser tab => no entry is selected.

@RobinMalfait RobinMalfait self-assigned this Jul 7, 2022
@RobinMalfait
Copy link
Member

RobinMalfait commented Jul 7, 2022

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

I'm missing a lot of information here so I'm going to make some guesses.
I'm assuming that you are having an issue where you are using this component in development and use something like Fast Refresh / hmr to swap out the old with the new code.

This has a potential issue where adding an item to a list changes the list and each item in it (new object reference) therefore the object equality is not guaranteed and the currently selected one is not selected anymore.

If this is your scenario, then there are 2 solutions you can use:

  1. Instead of using the full person object as a value, you can use a primitive value like an id as the value. This will work because even if the object changes, an id of type number or string will always have the same reference 1 === 1 // true.
  2. The other solution might be a bit nicer, but is not released yet. You can install the insiders version of Headless UI and provide a by prop to the Listbox where you basically tell the component that you are using objects, but you are compare by a certain property. This can also be a function where you can provide a custom comparator function. More info on this prop: Add by prop for Listbox, Combobox and RadioGroup #1482

If this is not your scenario, then please open a new issue with an actual minimal reproduction repo attached and some steps on reproducing the problem so that we can take a look.

Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants