\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3038,3041,3042],{"name":3039,"color":3040},"enhancement","a2eeef",{"name":3022,"color":3023},{"name":3025,"color":3026},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.72661495,{"description":3049,"labels":3050,"number":3054,"owner":3028,"repository":3029,"state":3030,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Description\n\nThe RekaUI Combobox which is used for the InputMenu has a Cancel component which is not implemented in InputMenu. It clears the selection, and makes the field clear for a new search.\nI would like to suggest to implement this too as it enhances the usability with long lists as it allows for quicker search instead of scrolling a long list.\n\nLink to the Cancel component: https://reka-ui.com/docs/components/combobox#cancel\n\n### Additional context\n\n_No response_",[3051,3052,3053],{"name":3039,"color":3040},{"name":3022,"color":3023},{"name":3025,"color":3026},4239,"InputMenu: implement clear/cancel like in Reka UI combobox","2025-05-28T06:25:43Z","https://github.com/nuxt/ui/issues/4239",0.75369734,{"description":3060,"labels":3061,"number":3065,"owner":3028,"repository":3029,"state":3030,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@11.5.1\n- Builder: -\n- User Config: devServer, runtimeConfig, experimental, devtools, ssr, components, modules, imports, shiki, css, ui, icon, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.11.2, @nuxt/ui@3.2.0, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, nuxt-shiki@0.3.1, @nuxt/icon@1.15.0, @nuxtjs/color-mode@3.5.2, @compodium/nuxt@0.1.0-beta.11\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.7\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/dropdown-menu (call any menu DropdownMenu from example)\nhttps://ui.nuxt.com/components/context-menu (call any menu ContexMenu from example)\n\n### Description\n\nWhen I call any UDropdownMenu or UContextMenu in my project, it causes the elements in the entire page template to shift and also removes the scrollbar from the page, which also causes the content to shift. This can also be checked on the documentation page. I made a screen recording.\n\nHere you can see how the icon in the left menu moves to select UI Pro, as well as scrolling this menu. And the main page scroll disappears.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3062,3063,3064],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4619,"UDropdownMenu, UContextMenu move elements on the page and remove page scroll","2025-07-28T15:39:43Z","https://github.com/nuxt/ui/issues/4619",0.7570903,{"description":3071,"labels":3072,"number":3080,"owner":3028,"repository":3029,"state":3081,"title":3082,"updated_at":3083,"url":3084,"score":3085},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi I would like to have within the component UselectMenu emit the event \"scroll\" \nwith the following properties: \n```\n{\n target: HTMLElement, \n currentTarget: HTMLElement, \n scrollTop: number,\n scrollHeight: number, \n clientHeight: number, \n}\n```\n\n to dynamically remote search items through an api and append it dynamically to my USelectMenu to create an infinite scroll. \n\nThis feature would be great in both version :)\n\n### Additional context\n\n_No response_",[3073,3074,3075,3078],{"name":3039,"color":3040},{"name":3025,"color":3026},{"name":3076,"color":3077},"closed-by-bot","ededed",{"name":3079,"color":3077},"stale",2793,"closed","add an emit \"scroll\" event for USelectMenu","2025-06-18T09:05:29Z","https://github.com/nuxt/ui/issues/2793",0.725745,{"description":3087,"labels":3088,"number":3093,"owner":3028,"repository":3029,"state":3081,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Description\n\nI'm trying to apply styling to specific elements, this is my current code for initializing my NavigationMenu items:\n```js\nconst items = ref\u003CNavigationMenuItem[]>([\n [\n {\n label: \"Something\",\n icon: \"\",\n to: \"/\"\n }\n ],\n [\n {\n icon: \"i-simple-icons-discord\",\n to: \"https://discord.gg/....\"\n }\n ]\n ])\n```\n\nI am trying to apply styling using tailwind like you would via `:ui=\"\"` on the `UNavigationMenu` element but in this case I want to change `linkLeadingIcon` only for the discord element, and replace `list` entirely for the `Something` element. I've been scouring the docs and such and I haven't been able to really find a way to do this. As far as I can tell I can't do styling based on label/icon/etc using compound variants.\n\nI'm fairly new to Nuxt UI so might be missing a obvious solution, thanks!",[3089,3092],{"name":3090,"color":3091},"question","d876e3",{"name":3022,"color":3023},3683,"NavigationMenu styling for specific items","2025-04-18T18:47:43Z","https://github.com/nuxt/ui/issues/3683",0.72926444,{"description":3099,"labels":3100,"number":3105,"owner":3028,"repository":3029,"state":3081,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n\n### Version\n\n2.19.2(vite@5.4.11)(vue@3.5.13)\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dvarzb\n\n### Description\n\nI tried to add new functionality on USelectMenu to have information icon on select menu option so that when you hover on it, it will trigger UPopover to display important detail of the object including an action button to open a slideover. \n\nI tried it on multiple mode and single mode. But the implementation was not working on single mode. To give you more context, I'm using `@mouseenter` and `@mouseleave` events on the popover panel slot in order to detect whether I'm on the popover panel and to prevent clicking the option when I'm clicking the `Open detailed view` button.\n\n\n\nThe issue was when I'm in single mode and tried to hover on the icon then clicked the `Open detailed view` button, it closes both the popover and the select menu.\n\nI expect it would open the slide over both in multiple and single select menu.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3101,3102,3103,3104],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3076,"color":3077},{"name":3079,"color":3077},2753,"[USelectMenu] [UPopover] Can't open click button inside popover panel in select menu option","2025-06-18T09:05:35Z","https://github.com/nuxt/ui/issues/2753",0.73052716,{"description":3111,"labels":3112,"number":3116,"owner":3028,"repository":3028,"state":3081,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.7.1\r\n- Builder: -\r\n- User Config: runtimeConfig, extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, nitro, i18n, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.0, @nuxt/fonts@0.7.1, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.0, @nuxtjs/i18n@8.5.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-u6tm1b?file=app.vue\n\n### Describe the bug\n\nWhen using a `v-model` prop with some initial object values (such as fetched already selected data from backend), the `\u003CUSelectMenu>` component doesn't show these as selected and seems to ignore them completely.\r\n\r\nEven when selecting the same objects again, it just seems to add them to the array and disregard anything, that was there previously.\n\n### Additional context\n\nThe behaviour changes when setting the `by` prop. In my case, I set it to `id`, after which I can see the object as selected, **but only** in the dropdown.\r\nThe button itself still shows `0 selected`.\n\n### Logs\n\n_No response_",[3113],{"name":3114,"color":3115},"pending triage","E99695",28733,"SelectMenu initial object values","2024-08-28T03:27:34Z","https://github.com/nuxt/nuxt/issues/28733",0.7393288,{"description":3122,"labels":3123,"number":3127,"owner":3028,"repository":3029,"state":3081,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\nTested on https://ui.nuxt.com/components/file-upload#label , Nuxt UI v3.3.0, in Chrome and Firefox\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/file-upload#label\n\n### Description\n\nThe file upload component introduced in v3.3.0 includes a 'Clear' button in the top right, which removes the uploaded file:\n\n\u003Cimg width=\"469\" height=\"380\" alt=\"Image of desert sands uploaded to a file upload component, with an X icon in the top right\" src=\"https://github.com/user-attachments/assets/8516b673-bb16-4d82-9961-9a4e852202fa\" />\n\nThis button doesn't have an accessible label (eg an aria-label or screenreader-only text) to indicate its purpose to assistive technology. For example, when testing this page with [NVDA](https://www.nvaccess.org/) and landing on this button, it just reads 'Button'. There's also no audible feedback when the file has been removed to indicate that the button press was successful, and ideally focus should be restored back to the file upload when the file is removed.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3124,3125,3126],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4590,"File upload component doesn't have accessible label for clear button","2025-07-27T17:52:10Z","https://github.com/nuxt/ui/issues/4590",0.74142206,{"description":3133,"labels":3134,"number":3137,"owner":3028,"repository":3029,"state":3081,"title":3138,"updated_at":3139,"url":3140,"score":3141},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nCurrently, we are unable to manually trigger the searchable method. Lets assume i have one `USelectMenu` component that list all `Parent` object and a second `USelectMenu` that list all `Children` of the selected `Parent`. Currently, when the `USelectMenu` component i mounted, the search query is executed even if the parent object is not yet selected.\n\nIt would me very useful to be able to manually trigger the search query method to populate the `USelectMenu` options.\n\nIs there any alternative to do it using the current behavior ? Maybe using a `ref` or something ?\n\n### Additional context\n\n_No response_",[3135,3136],{"name":3039,"color":3040},{"name":3025,"color":3026},2882,"USelectMenu: Manually trigger the search query","2025-05-10T17:19:44Z","https://github.com/nuxt/ui/issues/2882",0.7429935,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxtTP2iPJvdpG8X5IC3SRM7D7uGni2xvyDmXsHyW5pQc":-1},"/nuxt/ui/1057"]