Missing USelectMenu selected option name

[toyi]

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:

1. multiple has been removed
2. value-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

[benjamincanac]

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.

[toyi]

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.

[benjamincanac]

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.

[toyi]

Indeed good catch, I updated the reproduction so it's not an array anymore. It doesn't fix the issue though.

[benjamincanac]

I see the issue, when using a value-attribute the displayed label is computed from the options:

ui/src/runtime/components/forms/SelectMenu.vue

Line 371 in 3b97563

const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)

. When using a search function the 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.

[toyi]

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?

[benjamincanac]

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.

[aaronz-vipaso]

I am experiencing the same issue with UInputMenu.

@benjamincanac Can you please also fix it there? 🙏

[benjamincanac]

Sure, it will be fixed at the same time!