[NavigationMenu/DropdownMenu/ContextMenu] Generic type doesn't work when passing links as [][]

[benjamincanac]

No description provided.

[mauroerta]

Hello @benjamincanac , I'd like to help you with this issue, can I ask you for additional details? I'm not sure I got what the bug is / what I need to fix exactly, is it only related to links given as items, for example something like this?

// ...
const items = [
 [{ link: '/link/to/somewhere', label: 'Some Text' }]
]
</script>

<template>
    <NavigationMenu :items="items" />
 // ....

[benjamincanac]

The issue is when passing items as array of arrays, the generic item type T is not working.

1. Example with simple array:

2. Example with array of array:

We can see in the second example that the inferred type for item is the full NavigationMenuItem but not the generic type.

<script setup lang="ts">
const items = [[{
  label: 'Item',
  myfield: 'myfield'
}]]
</script>

<template>
  <UNavigationMenu :items="items">
    <template #item="{ item }">
      {{ item.myfield }}
    </template>
  </UNavigationMenu>
</template>

I have no idea how to fix that at the moment so any help is appreciated. Let me know if you need additional informations 😊

[benjamincanac]

@yassilah Given the awesome work you did on generic types, would you have an idea on how to solve this as well?

[yassilah]

Here's how I would do it (it works but there were already type errors in the file so I left it as it):

https://github.com/yassilah/ui/blob/fix/navigation-menu-items/src/runtime/components/NavigationMenu.vue#L88-L110

[yassilah]

I can also make a PR for this one and add type tests. I would wait for #2471 to be merged and re-use the SelectItems<T> type helper here too (I would probably rename it to MaybeArrayOfArray<T> so it's more generic and can be used for other components too)