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: [email protected]
• 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: https://github.com/nuxt/ui/blob/3b975634e8be3133d880c345ff8822ce3c514279/src/runtime/components/forms/SelectMenu.vue#L371. 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!

[Nyantekyi]

Hi @benjamincanac please has this been fixed because I am experiencing the same error with both USelectMenu and UInputMenu.

I realize if I specify a specific value attribute the display does not work... however if not specified... and an object is returned, the display works fine

[Nyantekyi]

Ok here Is a test I wrote using an example from the docs @benjamincanac

<script setup lang="ts">
const loading = ref(false);
const selected = ref();

async function search(q: string) {
  loading.value = true;

  const users = await $fetch<any[]>("https://jsonplaceholder.typicode.com/users", {
    params: { q },
  });

  loading.value = false;

  return users;
}
const options = [
  { id: 1, name: "Wade Cooper", colors: ["red", "yellow"] },
  { id: 2, name: "Arlene Mccoy", colors: ["blue", "yellow"] },
  { id: 3, name: "Devon Webb", colors: ["green", "blue"] },
  { id: 4, name: "Tom Cook", colors: ["blue", "red"] },
  { id: 5, name: "Tanya Fox", colors: ["green", "red"] },
  { id: 5, name: "Hellen Schmidt", colors: ["green", "yellow"] },
];
</script>

<template>
  <div>
    {{ selected }}
    <UInputMenu
      v-model="selected"
      :loading="loading"
      :search="search"
      optionAttribute="name"
      :searchAttributes="['name']"
      placeholder="Search for a user..."
      trailing
      valueAttribute="id"
    />
  </div>
</template>

I dont know if it is possible to just set the value of a first value to the actual selected object(in this case the userobject from the api) and then using a conditional watch function or maybe a debounce function to set the model value to the value attribute if it is set or the default selected object... This error still persist.

Please note that I am currently using the nuxt ui edge. Thank you

[Nyantekyi]

And in the spirit of taking my own advice

<script setup lang="ts">
const loading = ref(false);
const selected = ref();
const options = ref();

async function search(q: string) {
  loading.value = true;

  const users = await $fetch<any[]>("https://jsonplaceholder.typicode.com/users", {
    params: { q },
  });
  options.value = users;
  loading.value = false;

  return users;
}

const actualselected = computed(() => {
  if (selected.value) {
    return options.value.find((option) => option.id === selected.value.id)?.id;
  }
  return;
});
</script>

[Nyantekyi]

@benjamincanac Ow and I also noticed that searchLazy and debounce on both the selectmenu and inputmenu are not working

[benjamincanac]

@Nyantekyi Are you trying the Edge package?

[Nyantekyi]

Yes please... I was using the edge package... I saw your post that about the edge update...

[Nyantekyi]

Ow and @benjamincanac ... Ive been looking and patiently waiting on ui 3... can I help at least with the testing phase... I am currently writing an app that I know ui3 would be perfect for

[benjamincanac]

@Nyantekyi Not sure to understand, you're saying there is an issue with the latest Edge package? 🤔

[Nyantekyi]

Yes.... I am saying the error reported here still exist. As in As per the docs when valueAttribute and optionAttribute is set with an async search function, and/or with debounce... an error occurs where option attribute does not work, however value attribute works. I noticed when valueattribute is not set an object is returned and the error does not occur

[Nyantekyi]

I even thought it was because it was because of the compatibilityDate, however even after changing it ... same results @benjamincanac

[benjamincanac]

Would you be able to provide a reproduction?

[Nyantekyi]

@benjamincanac ...I hope this helps... https://github.com/Nyantekyi/reproduct-nuxtui

https://stackblitz.com/~/github.com/Nyantekyi/reproduct-nuxtui

[benjamincanac]

@Nyantekyi I don't see the issue in your reproduction, you can remove the by="id" to fix the selection but the value-attribute and option-attribute seems to be working fine for me.

[Nyantekyi]

this is what happens when a value is selected . the selected element's name as selected in the option attribute does not appear.... @benjamincanac

However if value attribute is not set I get this

[benjamincanac]

The @nuxt/ui version installed is 2.17.0 in your reproduction (package-lock.json), you haven't installed the dependencies correctly.

[Nyantekyi]

really

The @nuxt/ui version installed is 2.17.0 in your reproduction (package-lock.json), you haven't installed the dependencies correctly.

Please help me...how do I fix this

[benjamincanac]

You can remove the package-lock.json and run npm install again.

[Nyantekyi]

You can remove the package-lock.json and run npm install again.

I did that already and I still have the same issue...