\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan v-text=\"item.label\" />\n \u003C/template>\n\u003C/UDropdownMenu>\n```",[3187,3188],{"name":3166,"color":3167},{"name":3149,"color":3150},4636,"DropdownMenu keyboard interaction handling","2025-07-31T06:44:47Z","https://github.com/nuxt/ui/issues/4636",0.77603376,{"description":3195,"labels":3196,"number":3204,"owner":3155,"repository":3156,"state":3205,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Environment\n\nnuxt: 3.15.1\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n-\n\n### Description\n\n```\n\u003CUModal>\n \u003CUInput v-model=\"state.name\" placeholder=\"..\" />\n \u003CUInput v-model=\"state.name1\" placeholder=\"...\" />\n\u003C/UModal>\n```\n\nWhen a modal contains one or more input boxes, the first input box will always get focus automatically.\nIf I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3197,3198,3199,3202],{"name":3146,"color":3147},{"name":3152,"color":3153},{"name":3200,"color":3201},"closed-by-bot","ededed",{"name":3203,"color":3201},"stale",3062,"closed","The input box in the modal will automatically gain focus","2025-06-18T09:02:39Z","https://github.com/nuxt/ui/issues/3062",0.72220105,{"description":3211,"labels":3212,"number":3216,"owner":3155,"repository":3156,"state":3205,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Description\n\n[v2] Clicking on any area in UModal will cause the panel in UHeader to be closed\n`\n\u003Cscript lang=\"ts\" setup>\n\nconst links = [\n {\n label: 'Docs',\n icon: 'i-heroicons-book-open',\n to: '/getting-started'\n },\n {\n label: 'Pro',\n icon: 'i-heroicons-square-3-stack-3d',\n to: '/pro'\n },\n {\n label: 'Releases',\n icon: 'i-heroicons-rocket-launch',\n to: '/releases'\n }\n]\n\n\nconst modal = useModal()\n\nconst onLogin = () => {\n modal.open(ModalsLogin)\n}\nconst onRegister = () => {\n modal.open(ModalsRegister)\n}\n\n\u003C/script>\n\n\u003Ctemplate>\n\n \u003CUHeader :links=\"links\">\n \u003Ctemplate #logo>\n \u003CLogo class=\"w-auto h-6\" />\n \u003C/template>\n\n \u003Ctemplate #right>\n \u003CUColorModeButton />\n\n \u003CUButton\n to=\"https://github.com/nuxt/ui\"\n target=\"_blank\"\n icon=\"i-simple-icons-github\"\n color=\"gray\"\n variant=\"ghost\"\n />\n \u003C/template>\n\u003Ctemplate>\n\n\n \u003Ctemplate #panel>\n \u003CUNavigationTree :links=\"menus\" />\n \u003Cdiv class=\"flex items-center justify-between gap-x-[20px] mt-[20px]\">\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onLogin\">login\u003C/UButton>\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onRegister\"\n >register\u003C/UButton\n >\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>`",[3213,3214,3215],{"name":3166,"color":3167},{"name":3200,"color":3201},{"name":3203,"color":3201},4244,"Clicking on any area when opening the UModal component in UHeader will cause the panel to be closed","2025-08-20T02:08:36Z","https://github.com/nuxt/ui/issues/4244",0.7307184,{"description":3222,"labels":3223,"number":3227,"owner":3155,"repository":3156,"state":3205,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.1\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules\r\n- Runtime Modules: @nuxt/ui@2.17.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.17.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-5movd8?file=app.vue\r\n(Test on mobile or open Devtools and toggle device mode.)\r\n\r\n### Description\r\n\r\nWhen two or more `UModal` are using `preventClose` prop doesn't allow to interact with the elements of the modal on top when in touch mode.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3224,3225,3226],{"name":3146,"color":3147},{"name":3200,"color":3201},{"name":3203,"color":3201},1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7432324,{"description":3233,"labels":3234,"number":3242,"owner":3155,"repository":3156,"state":3205,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### Description\n\nA toggle button would be very useful. The closest thing we have is radio group or checkbox group. \nInspired by:\n[VBtnToggle](https://vuetifyjs.com/en/components/button-groups/)\n[VChipGroup](https://vuetifyjs.com/en/components/chip-groups/#usage)\n\nSimilar functionality could be achieved on RadioGroup by making unchecking possible (so null values are selectable)\nAND/OR\nBy adding a v-model to the button component, and model-active variants (so you can change the color, varient, icon, etc when checked). The model would be either a Boolean or an array of values similar to Vuetify.\n\n### Additional context\n\n_No response_",[3235,3238,3241],{"name":3236,"color":3237},"duplicate","cfd3d7",{"name":3239,"color":3240},"enhancement","a2eeef",{"name":3149,"color":3150},4246,"[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7501222,{"description":3248,"labels":3249,"number":3252,"owner":3155,"repository":3156,"state":3205,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### Description\n\nHi, looking at the example for the UModal, it's easy to emit a close event if someone uses the close button. But if the modal is dismissible, I don't know how to emit easily an event.\n\nIn the example there is a \"dismiss\" Button, but for me that's not the same, for sure there are workarounds possible, but an easy solution that the component is catching all kinds of close events would be really helpful. Or is there a way and I don't see it?\n\nThanks a lot in advance\n\nChristoph\n\n```\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n count: number\n}>()\n\nconst emit = defineEmits\u003C{ close: [boolean] }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal\n :close=\"{ onClick: () => emit('close', false) }\"\n :title=\"`This modal was opened programmatically ${count} times`\"\n >\n \u003Ctemplate #footer>\n \u003Cdiv class=\"flex gap-2\">\n \u003CUButton color=\"neutral\" label=\"Dismiss\" @click=\"emit('close', false)\" />\n \u003CUButton label=\"Success\" @click=\"emit('close', true)\" />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\n```\n\n\n### Additional context\n\n_No response_",[3250,3251],{"name":3239,"color":3240},{"name":3149,"color":3150},4537,"Modal emitting close event if is dismissed","2025-07-17T10:06:09Z","https://github.com/nuxt/ui/issues/4537",0.7584436,{"description":3258,"labels":3259,"number":3262,"owner":3155,"repository":3156,"state":3205,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### Description\n\nIs it possible to use a UForm within a UModal, but have the submit button in the modal's footer? I tried to wrap the whole modal with no success:\n\n```vue\n\u003Ctemplate>\n \u003CUForm :schema=\"userCreateSchema\" :state @submit=\"onSubmit\">\n \u003CUModal title=\"Create user\">\n \u003Ctemplate #body>\n \u003CUFormField label=\"First name\" name=\"givenName\" required>\n \u003CUInput v-model=\"state.givenName\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[3260,3261],{"name":3166,"color":3167},{"name":3149,"color":3150},4401,"How to use a UForm within a UModal with footer?","2025-08-21T09:37:27Z","https://github.com/nuxt/ui/issues/4401",0.764266,["Reactive",3268],{},["Set"],["ShallowReactive",3271],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYlTHcJqjaQWv2cTUgzacJ4IzSYdBuPejZdpl0QJymuU":-1},"/nuxt/ui/3187"]