InputMenu / SelectMenu type issue

[Oui-Dev]

Environment

• Operating System: Linux
• Node Version: v22.14.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, modules
• Runtime Modules: @nuxt/[email protected], @pinia/[email protected], pinia-plugin-persistedstate/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

Description

One week ago i have opened this issue on v3.0.1 : #3670

But now it's a lot worse, we can't pass array of custom object we're obliged to use SelectMenuItem[] or InputMenuItem[], and the issue with label-key props is not solved now I have this typescript error : Cannot assign type 'string' to type 'undefined'.ts-plugin(2322).

I really appreciate your work on the V3 this version is a lot better than V2, but in our project we can't fit for each select your data structure we need to use custom object (like in the V2).

Additional context

No response

Logs

[brenodanyel]

Hey @benjamincanac!

It looks like the 3.0.2 release introduced a breaking change in SelectMenu (and possibly some other components) when using objects as value while passing the value-key prop. This issue appears to be related to #3331.

For now, I’m rolling back to 3.0.1, but I hope a fix is on the way. Thanks for your time!

Here’s a minimal reproduction:
https://codesandbox.io/p/devbox/jolly-kowalevski-m2pq3c?file=%2Fsrc%2FApp.vue%3A6%2C10

cc @sandros94

[sandros94]

It looks like the 3.0.2 release introduced a breaking change in SelectMenu (and possibly some other components) when using objects as value while passing the value-key prop. This issue appears to be related to #3331.

Indeed that PR is the cause of this change, but in reality it was a fix and now working as intended.

The value key in each menu item in all components is a reserved key internally typed, this is because it also acts as the default value-key for some of them and our original goal was to align this as much as possible between components.

To have proper typing you should add your own key like for example data, and update value-key="data":

<template>
  <UApp>
    <div class="h-screen grid place-items-center">
      <USelectMenu v-model="selectedValue" :items="menuItems" value-key="data" class="w-56" />
    </div>
  </UApp>
</template>

<script setup lang="ts">
import { ref } from 'vue'

type Value = {
  name: string
  id: string
}

const selectedValue = ref<Value>()

const menuItems: { label: string, data: Value }[] = [
  { label: 'Item 1', data: { id: '1', name: 'First example' } },
  { label: 'Item 2', data: { id: '2', name: 'Other example' } },
]
</script>

[sandros94]

Tho I'm considering a few alternatives to make this easier to understand/predict