Missing USelectMenu selected option name
toyi opened this issue · comments
Environment
- Operating System: Linux
- Node Version: v20.12.2
- Nuxt Version: -
- CLI Version: 3.10.1
- Nitro Version: -
- Package Manager: pnpm@9.0.1
- Builder: -
- User Config: -
- Runtime Modules: -
- Build Modules: -
Version
v2.16.0
Reproduction
https://stackblitz.com/edit/nuxt-ui-ntqist?file=app.vue
Description
This bug arises when you use a search function and want a specific value attribute.
The reproduction is mainly the documentation example for async search (https://ui.nuxt.com/components/select-menu#async-search) but with two changes:
multiple
has been removedvalue-attribute="id"
has been added
<USelectMenu
v-model="selected"
:loading="loading"
:searchable="search"
placeholder="Search for a user..."
option-attribute="name"
value-attribute="id"
trailing
/>
Now, when an option is selected, its name doesn't appear anymore.
Of course, the goal here is to only assign the id
to the v-model
, that's why I added the value-attribute="id"
. Without, the entire object is being assigned to the v-model
.
Additional context
Additionaly, I should probably write another issue (and will do if needed), but just adding by="id"
in the reproduction shows another weird behavior. This time, everything is shown as "selected".
Logs
No response
Would you mind look what version of @headlessui/vue
you have? If you are on the 1.7.21
, you can refresh your lockfile to update to 1.7.22
and it might solve the issue.
Reading the changes, this version was indeed a good fix candidate.
Unfortunately, both my local / repro were already on 1.7.22
and the problem persists.
Not sure this is the cause but in your reproduction, selected
is an array. It won't work if you don't set the multiple
prop.
Indeed good catch, I updated the reproduction so it's not an array anymore. It doesn't fix the issue though.
I see the issue, when using a value-attribute
the displayed label is computed from the options:
options
are empty. It can be fixed by using the computed options (results of async search) but since the search function watches the q
, the options will change and at some point the modelValue will disappear.
Let me know if my explanation isn't clear.
It is what I understood, in my project I wrote an high order component that keep the value of the selected option. It works but it feels kind of hacky. I had a similar issue when I made a tag list component using the SelectMenu as a base. The badges, representing the selected options, were disappearing when the option list was updated.
It would be a pleasure to help fix this issue but I honestly don't have the time do to so, at least not for the upcoming weeks. Maybe mentioning this caveat in the documentation would be a good idea?
I'll fix part of it so the value-attribute
takes search results into account. However, there will still be the issue when doing the filtering with q
on your side, not sure how to fix that at the moment.
I am experiencing the same issue with UInputMenu
.
@benjamincanac Can you please also fix it there? 🙏
Sure, it will be fixed at the same time!