\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>`",[3038],{"name":3039,"color":3040},"question","d876e3",4244,"Clicking on any area when opening the UModal component in UHeader will cause the panel to be closed","2025-05-28T14:43:17Z","https://github.com/nuxt/ui/issues/4244",0.7633604,{"description":3047,"labels":3048,"number":3050,"owner":3028,"repository":3029,"state":3051,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Description\n\nHello.\n\nWith a modal when it opens the first button present is selected. Is there a way to change selection order or prevent it completely?\nIn exemple below the reset button is pre-selected. \n\nI could reorder buttons instead but I would like no pre-selections instead and prevent users' \"miss-click\". Thanks.\n\n```html\n \u003CUModal v-model=\"dialog\" prevent-close>\n \u003CUCard>\n \u003Cp>Reset data or continue?\u003C/p>\n\n \u003Cdiv class=\"flex justify-between\">\n \u003CUButton color=\"gray\" variant=\"ghost\" @click=\"reset\">\n Delete current data\n \u003CUIcon name=\"i-heroicons-x-mark-20-solid\" class=\"text-red-600\" />\n \u003C/UButton>\n\n \u003CUButton color=\"gray\" variant=\"ghost\" @click=\"continue\">\n Continue\n \u003CUIcon name=\"i-mdi-arrow-right-circle\" class=\"text-primary\" />\n \u003C/UButton>\n \u003C/div>\n \u003C/UCard>\n \u003C/UModal>\n```",[3049],{"name":3039,"color":3040},3187,"closed","[V2] How to prevent button pre-selection on UModal?","2025-05-23T15:45:56Z","https://github.com/nuxt/ui/issues/3187",0.72206146,{"description":3057,"labels":3058,"number":3065,"owner":3028,"repository":3029,"state":3051,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### 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_",[3059,3060,3063],{"name":3019,"color":3020},{"name":3061,"color":3062},"closed-by-bot","ededed",{"name":3064,"color":3062},"stale",1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.72422814,{"description":3071,"labels":3072,"number":3079,"owner":3028,"repository":3028,"state":3051,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.18.2`\r\n- Nuxt Version: `3.6.1`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `npm@9.8.1`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `nitro`, `app`, `modules`, `security`, `vite`\r\n- Runtime Modules: `nuxt-security@1.0.0-rc.2`, `nuxt-vitest@0.10.2`\r\n- Build Modules: `-`\r\n\r\n\r\nAlthough we are pinned at Nuxt v3.6.1 'for reasons' the bug can be observed in StackBlitz repro on Nuxt v3.8.2\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-6rrfcj?file=pages%2Findex.vue\r\n\r\nNote: Issue relates to keyboard navigation! - not mouse.\r\n\r\n- Open `index` page and tab bring focus to button labelled `Goto Two`. \r\n- Hit enter key to effectively `click` button. (remember, keyboard - not mouse!)\r\n- Browser navigates to page `two`\r\n\r\nNotice the header suggests that the function `handleNext` has been called. This suggest that the `@keyup` event has fired on the `input` control on page `two` as `handleNext` is the function handling of that event. I can't think why this should be expected behaviour. Almost as if the `keyup` event from pressing the button on the `index` page is being seen by page `two` when the `focus()` call is made?! \r\n\r\nOpen the browser devtools to see console.log messages also indicating that `handleNext` has been called.\r\n\r\nAlso, to add additional context/relevant to help diagnose the error. In the script for `two.vue` there is another option (2) that can be uncommented and option (1) commented out. This only calls `focus()` after a delay. With this in place the potential bug doesn't happen.\r\n\r\n### Describe the bug\r\n\r\nI'm seeing what I think maybe a bug when navigating to a page that combines and `input` control with an associated `@keyup` handler that is also focused on page load via `onMounted` lifecycle event.\r\n\r\nFollow the reproduction above and also the effect of delaying the call to `focus()` on the `input` control.\r\n\r\n\r\n### Additional context\r\n\r\nChanging the event type on the `input` field from `@keyup` to `@keydown` also avoids the issue.\r\n\r\n### Logs\r\n\r\n_No response_",[3073,3076],{"name":3074,"color":3075},"3.x","29bc7f",{"name":3077,"color":3078},"pending triage","E99695",24434,"Unexpected @keyup triggering on focused input field when navigated to via keyboard \"click\"","2023-11-28T14:35:12Z","https://github.com/nuxt/nuxt/issues/24434",0.74334574,{"description":3085,"labels":3086,"number":3090,"owner":3028,"repository":3029,"state":3051,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: extends, modules, app, ui, imports, devtools\r\n- Runtime Modules: @nuxt/ui@2.13.0, @pinia/nuxt@0.5.1\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\n\"@nuxt/ui\": \"^2.13.0\"\n\n### Reproduction\n\nDescription should be clear enough.\n\n### Description\n\n\u003Cimg width=\"300\" alt=\"Screen Shot 2024-02-10 at 9 02 12 AM\" src=\"https://github.com/nuxt/ui/assets/5523014/144df6f1-3704-4b13-929c-c74cfd81aecd\">\r\n\r\n\r\nWhen a `Modal` has a `Form` inside of it, and you go on mobile, the bug happens.\r\n\r\nThe modal always goes to the bottom of the screen. When the keyboard input opens, it covers the modal. \r\n\r\nClosing the keyboard input reveals the unseen mobile modal.\r\n\r\nI would suggest moving the modal to the top, or to compensate for the keyboard dynamically and be placed therefore somewhere in the top-middle.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3087,3088,3089],{"name":3019,"color":3020},{"name":3061,"color":3062},{"name":3064,"color":3062},1346,"Modal With Form on Mobile is Covered by Keyboard Input","2025-06-19T02:12:54Z","https://github.com/nuxt/ui/issues/1346",0.75003386,{"description":3096,"labels":3097,"number":3102,"owner":3028,"repository":3029,"state":3051,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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_",[3098,3101],{"name":3099,"color":3100},"enhancement","a2eeef",{"name":3022,"color":3023},4537,"Modal emitting close event if is dismissed","2025-07-17T10:06:09Z","https://github.com/nuxt/ui/issues/4537",0.7529034,{"description":3108,"labels":3109,"number":3112,"owner":3028,"repository":3029,"state":3051,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, css, future, compatibilityDate, vite\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-bsi7gjhw?file=app%2Fapp.vue\n\n### Description\n\nThe UInput component behaves the same way whether using `v-model` or just `:modelValue`—it retains input values when typed into. However, this is incorrect because I did not set up the `@update:modelValue` event\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3110,3111],{"name":3019,"color":3020},{"name":3022,"color":3023},4355,"The UInput component is not a controlled component","2025-06-16T10:45:31Z","https://github.com/nuxt/ui/issues/4355",0.7563554,{"description":3118,"labels":3119,"number":3124,"owner":3028,"repository":3028,"state":3051,"title":3125,"updated_at":3126,"url":3127,"score":3128},"I have the following dependencies:\n\n```\n\"dependencies\": {\n \"bootstrap\": \"^5.3.3\",\n \"consola\": \"^3.2.3\",\n \"jquery\": \"^3.7.1\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n\n```\nInitially I wanted to implement push state in the modal so that when the back button is used, it will close the modal. but when I implemented it I had to press the back button 2 times to be able to close the modal. is the bootstrap modal like that or is there something else that affects it? ",[3120,3121],{"name":3077,"color":3078},{"name":3122,"color":3123},"needs reproduction","FBCA04",30245,"Bootstrap modal uses push state, even though I don't use it","2024-12-13T11:47:56Z","https://github.com/nuxt/nuxt/issues/30245",0.759091,{"description":3130,"labels":3131,"number":3136,"owner":3028,"repository":3029,"state":3051,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.11.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@10.4.0`\n- Builder: `-`\n- Runtime Modules: `@nuxt/ui@2.21.0`\n- Build Modules: `-`\n\n\n### Version\n\n2.21.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-flkscwuw?file=app.vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst fullscreen = ref\u003Cboolean>(false);\nconst isOpen = ref\u003Cboolean>(false);\n\nconst toggleModal = () => {\n isOpen.value = !isOpen.value;\n};\nconst toggleFullscreen = () => {\n fullscreen.value = !fullscreen.value;\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"Open modal\" @click=\"toggleModal\" />\n \u003CUModal v-model=\"isOpen\" :fullscreen=\"fullscreen\">\n \u003Cdiv class=\"p-4\">\n \u003CUButton label=\"Toggle fullscreen\" @click=\"toggleFullscreen\" />\n \u003C/div>\n \u003C/UModal>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nStarting from [2.18.6](https://github.com/nuxt/ui/releases/tag/v2.18.6) @nuxt/ui version, Modal component become transparent when toggle `fullscreen` property. It seems something wrong with transitions css classes in UI props.\n\n**Expected behavior:**\n1. open Modal with `fullscreen=false`\n2. set `fullscreen=true`, Modal fills all viewport\n3. set `fullscreen=false`, Modal become small again\n\n**On 2.18.5 works as expected.** \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3132,3133,3134,3135],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3061,"color":3062},{"name":3064,"color":3062},3292,"Modal component fullscreen property toggle cause invalid css transition","2025-06-18T09:02:08Z","https://github.com/nuxt/ui/issues/3292",0.76170766,["Reactive",3142],{},["Set"],["ShallowReactive",3145],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0p2yGB_Oi0fzbstQerNLgzIYTlpwx4mNxWsHNfKbIb8":-1},"/nuxt/ui/3062"]