fix(InputMenu/SelectMenu): use by prop to compare objects & support dot notation in value-attribute

[rdjanuar]

🔗 Linked issue

Resolves #2028, resolves #2086, resolves #2342, resolves #2464

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[cloudflare-workers-and-pages]

Deploying ui3 with    Cloudflare Pages

Latest commit:	633eac3
Status:	🚫  Build failed.

View logs

[benjamincanac]

@rdjanuar There seem to have an error with async search, try this: https://ui-dv8lpjs33-nuxt-js.vercel.app/components/select-menu#async-search

[benjamincanac]

There is one more thing, when you make an async search the selected item disappears when it's no longer in the options.

You should change it so it behave like InputMenu, falling back to modelValue when there is no valueAttribute.

[benjamincanac]

Do you think this #2342 is related? 🤔

[rdjanuar]

i already fix that issue u can check here https://ui-dc7qpq1zz-nuxt-js.vercel.app/components/select-menu#async-search.

I think the condition should rely on selected instead of modelValue @benjamincanac

[rdjanuar]

I want to ask, is it normal for the USelectMenu component to fetch data when using props.search on mount? I think it should only interact/fetch when searching for a item @benjamincanac

[benjamincanac]

There is a searchableLazy prop to handle this.

The count is not fixed:
https://volta.s3.fr-par.scw.cloud/Clean_Shot_2024_11_10_at_18_06_37_78ab4c6135.mp4

[rdjanuar]

There is a searchableLazy prop to handle this.

The count is not fixed: https://volta.s3.fr-par.scw.cloud/Clean_Shot_2024_11_10_at_18_06_37_78ab4c6135.mp4

You right @benjamincanac , we should rely on props.modelValue

[benjamincanac]

@rdjanuar With your latest commits, your no longer handling the valueAttribute in the label 🤔

[rdjanuar]

Yes i remove it. Because i think condition props.optionAttribute relevant to handle label instead of props.valueAttribute @benjamincanac

[benjamincanac]

Yeah but if a valueAttribute is set, the modelValue won't be an object it will be a string.

[benjamincanac]

Well, I think we're good! Thanks a lot for your work on this 😊

[benjamincanac]

I think there is one last issue when using async search + value-attribute but it's impossible to fix, I have the same on v3 😅

[rdjanuar]

may i know the issue? @benjamincanac

[benjamincanac]

When you're doing an async search and set a value-attribute, the fallback to modelValue won't work since the items are gone when you search. Try this:

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

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

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

  loading.value = false

  return users
}
</script>

<template>
  <USelectMenu
    v-model="selected"
    :loading="loading"
    :searchable="search"
    placeholder="Search for a user..."
    option-attribute="name"
    value-attribute="id"
  />
</template>

[rdjanuar]

When you're doing an async search and set a value-attribute, the fallback to modelValue won't work since the items are gone when you search. Try this:

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

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

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

  loading.value = false

  return users
}
</script>

<template>
  <USelectMenu
    v-model="selected"
    :loading="loading"
    :searchable="search"
    placeholder="Search for a user..."
    option-attribute="name"
    value-attribute="id"
  />
</template>

i think the fallback work correctly, maybe u can try it after deployment dev is success

[benjamincanac]

I just tried it locally, how can you fallback on a value that doesn't exist? The modelValue is equal to the id of the selected user.

[rdjanuar]

I just tried it locally, how can you fallback on a value that doesn't exist? The modelValue is equal to the id of the selected user.

your right, i already test it and the label disappear hahahaha. i have no idea to handle that :((

[benjamincanac]

Don't worry about it, I really don't think its possible..