``` the ```type=\"text\"``` and ```\u003CUSelect />``` fields match heights, but the ```type=\"search\"``` is the outlier.\n- When NOT using ```\u003CUFormField />```, then the ```type=\"text\"``` field is the outlier. \n\n### Additional context\n\nAs rendered in Dev Tools:\n\n\n\nAfter removing ```type=\"search\"``` in dev tools.\n\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[2948,2949,2950],{"name":2907,"color":2908},{"name":2910,"color":2911},{"name":2913,"color":2914},4014,"Input Fields on ```Safari``` has Mismatched Sizes","2025-04-29T04:28:11Z","https://github.com/nuxt/ui/issues/4014",0.7564922,{"description":2957,"labels":2958,"number":2966,"owner":2916,"repository":2917,"state":2967,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v22.4.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.13.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@9.4.0\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, future, experimental, app, site, sitemap, routeRules, css, colorMode, runtimeConfig, modules, postcss, typescript\r\n- Runtime Modules: nuxt-headlessui@1.2.0, @nuxt/eslint@0.3.13, @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @pinia-plugin-persistedstate/nuxt@1.2.1, @nuxt/scripts@0.8.4, nuxt-anchorscroll@1.0.3, @nuxtjs/seo@2.0.0-rc.21\r\n- Build Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/command-palette#usage\n\n### Description\n\nOn mobile devices, when the modal is positioned at the bottom of the screen, the Command Palette becomes obscured by the virtual keyboard. This issue occurs when the Command Palette contains fewer than 6 elements or none at all, making it completely inaccessible for users.\r\n\r\nThe issue can be reproduced on the official component page: \r\n[https://ui.nuxt.com/components/command-palette](https://ui.nuxt.com/components/command-palette)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2959,2960,2961,2964],{"name":2907,"color":2908},{"name":2913,"color":2914},{"name":2962,"color":2963},"closed-by-bot","ededed",{"name":2965,"color":2963},"stale",2157,"closed","Command Palette appears behind virtual keyboard when inside Modal on mobile devices","2025-06-18T09:06:08Z","https://github.com/nuxt/ui/issues/2157",0.65595686,{"description":2973,"labels":2974,"number":2978,"owner":2916,"repository":2917,"state":2967,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: ^3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: -\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate, formkit\n- Runtime Modules: @nuxt/ui@^3.1.3, @nuxt/eslint@^1.4.1, @formkit/nuxt@^1.6.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gallant-scooby-hcy72z\n\n### Description\n\nI am upgrading my app to use Nuxt UI v3 and am having issues with `UModal` and [FormKit](https://formkit.com/).\n\nI am unable to open a modal with a FormKit modal inside of it. I get the following error.\n\n\u003Cimg width=\"557\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/dc0baba8-ed91-4006-9164-5e9e1fa6c67a\" />\n\nI believe this is an issue with Nuxt UI and not FormKit because it used to work fine on the previous version.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nindex.vue:17 [Vue warn]: Unhandled error during execution of mounted hook \n at \u003CDialogTrigger key=0 as-child=\"\" class=\"\" > \n at \u003CDialogRoot modal=true open=true onAfter:leave=fn ... > \n at \u003CUModal close= {onClick: ƒ} title=\"This modal was opened programmatically 0 times\" open=true ... > \n at \u003CModalExample key= Symbol(useOverlay) ref_for=true count=0 ... > \n at \u003CUOverlayProvider > \n at \u003CTooltipProvider > \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=undefined locale=undefined > \n at \u003CApp > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\nwarn$1 @ runtime-core.esm-bundler.js?v=fb91d406:50\nlogError @ runtime-core.esm-bundler.js?v=fb91d406:261\nhandleError @ runtime-core.esm-bundler.js?v=fb91d406:253\ncallWithErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:199\ncallWithAsyncErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:204\nhook.__weh.hook.__weh @ runtime-core.esm-bundler.js?v=fb91d406:2842\nflushPostFlushCbs @ runtime-core.esm-bundler.js?v=fb91d406:382\nflushJobs @ runtime-core.esm-bundler.js?v=fb91d406:424\nPromise.then\nqueueFlush @ runtime-core.esm-bundler.js?v=fb91d406:319\nqueueJob @ runtime-core.esm-bundler.js?v=fb91d406:314\neffect2.scheduler @ runtime-core.esm-bundler.js?v=fb91d406:5499\ntrigger @ reactivity.esm-bundler.js?v=fb91d406:235\nendBatch @ reactivity.esm-bundler.js?v=fb91d406:293\ntrigger @ reactivity.esm-bundler.js?v=fb91d406:693\nset @ reactivity.esm-bundler.js?v=fb91d406:974\nopen @ useOverlay.js?v=fb91d406:29\nopen @ useOverlay.js?v=fb91d406:18\nopen @ index.vue:17\n(anonymous) @ Button.vue:80\nonClickWrapper @ Button.vue:80\nonClickWrapper @ LinkBase.vue:30\ncallWithErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:197\ncallWithAsyncErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:204\ninvoker @ runtime-dom.esm-bundler.js?v=fb91d406:720\nuseForwardExpose.js?v=fb91d406:8 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeName')\n at ComputedRefImpl.fn (useForwardExpose.js?v=fb91d406:8:64)\n at refreshComputed (reactivity.esm-bundler.js?v=fb91d406:361:29)\n at get value (reactivity.esm-bundler.js?v=fb91d406:1567:5)\n at DialogTrigger.js?v=fb91d406:19:57\n at runtime-core.esm-bundler.js?v=fb91d406:2862:40\n at callWithErrorHandling (runtime-core.esm-bundler.js?v=fb91d406:197:19)\n at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?v=fb91d406:204:17)\n at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?v=fb91d406:2842:19)\n at flushPostFlushCbs (runtime-core.esm-bundler.js?v=fb91d406:382:28)\n at flushJobs (runtime-core.esm-bundler.js?v=fb91d406:424:5)\n```",[2975,2976,2977],{"name":2907,"color":2908},{"name":2910,"color":2911},{"name":2913,"color":2914},4309,"UModal does not work with FormKit","2025-06-07T23:36:34Z","https://github.com/nuxt/ui/issues/4309",0.7078289,{"description":2984,"labels":2985,"number":2989,"owner":2916,"repository":2917,"state":2967,"title":2990,"updated_at":2991,"url":2992,"score":2993},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.1.28\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue\n\n### Description\n\nGiven this component nesting:\n\n- `UForm`\n - `UModal`\n - `UForm`\n\nThis is rendered as the following html:\n\n- `UForm` -> `form` - ✅\n - `UModal` -> `div` - ✅ (teleported to root)\n - `UForm` -> `div` - ❌ I am expecting `form`.\n\nI couldn't find a mention in the documentation that this is expected behaviour.\n\nTo reproduce:\n1. Run reproduction\n2. Click \"Open modal\" button\n3. Inspect the nested form element. It's a `div`:\n\n\nI am happy to have a crack at a PR, if you're willing to point me in the right direction 😌\n\n\n### Additional context\n\nFor context, this is our use case:\n* User fills out an onboarding form\n* One field in the onboarding form is business details\n* User has option to populate business details via business number (eg. [DUNS](https://www.dnb.com/en-us/smb/duns.html))\n* Business number field open in modal\n* User can enter business number in form in modal\n* User submits form, it populates state in parent form\n\n### Logs\n\n```shell-script\n\n```",[2986,2987,2988],{"name":2907,"color":2908},{"name":2910,"color":2911},{"name":2913,"color":2914},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.71715724,{"description":2995,"labels":2996,"number":3006,"owner":2916,"repository":2917,"state":2967,"title":3007,"updated_at":3008,"url":3009,"score":3010},"### Description\n\nIf I open one of these 3 (modal, sidebar, dropdown) nuxt ui is adding styles to the body which cause strange layout behaviors.\nI would like to costumize these or modify. Thats what currently gets added when opening a modal and causes problems\n```\n\u003Cbody style=\"padding-right: 9px; margin-right: 0px; --scrollbar-width: 9px; overflow: hidden; pointer-events: none;\">\n```\n\nIs there a way to do that right now?",[2997,3000,3001,3004,3005],{"name":2998,"color":2999},"question","d876e3",{"name":2910,"color":2911},{"name":3002,"color":3003},"reka-ui","56d799",{"name":2962,"color":2963},{"name":2965,"color":2963},3078,"Scrolllock when opening modal, dropdown, sidebar","2025-06-18T09:02:37Z","https://github.com/nuxt/ui/issues/3078",0.7272836,{"description":3012,"labels":3013,"number":3017,"owner":2916,"repository":2917,"state":2967,"title":3018,"updated_at":3019,"url":3020,"score":3021},"### 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_",[3014,3015,3016],{"name":2907,"color":2908},{"name":2962,"color":2963},{"name":2965,"color":2963},1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7279009,{"description":3023,"labels":3024,"number":3029,"owner":2916,"repository":2917,"state":2967,"title":3030,"updated_at":3031,"url":3032,"score":3033},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/fonts@0.10.3, @nuxt/ui@2.20.0, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.13.2\n\n### Reproduction\n\n1. Use this template: https://github.com/nuxt-ui-pro/dashboard\n2. Run the app (npm run dev) (or run the demo: https://dashboard-template.nuxt.dev/)\n3. Open devtools and toggle device toolbar\n4. Click on the menu icon and then the nuxt text on the top. \n5. It is buggy because the hover mode is not taking into account the touch device input.\n\n\n\n\n### Description\n\nI use the template from https://github.com/nuxt-ui-pro/dashboard and tested it on mobile.\nThe component UDropdown has a mode of 'hover'. This however breaks the interaction on mobile/touch devices.\n\n\u003CUDropdown v-slot=\"{ open }\" mode=\"hover\" :items=\"[teams, actions]\" class=\"w-full\" :ui=\"{ width: 'w-full' }\"\n :popper=\"{ strategy: 'absolute' }\">\n\nThis is reproduced in the devtools using the mobile emulator, as well as your own device (ios).\n\n### Additional context\n\nI believe this to be a bug since an example should be working properly on all devices without workarounds.\n\n### Logs\n\n```shell-script\n\n```",[3025,3026,3027,3028],{"name":2907,"color":2908},{"name":2913,"color":2914},{"name":2962,"color":2963},{"name":2965,"color":2963},2989,"Dropdown with mode=\"hover\" breaks interaction on touch device","2025-06-18T09:05:08Z","https://github.com/nuxt/ui/issues/2989",0.7393606,["Reactive",3035],{},["Set"],["ShallowReactive",3038],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fve3dzXsB9T4-ZRuddelAbCGMajacIIMoXoxpBcz36Uw":-1},"/nuxt/ui/1346"]