\n \u003C/u-form>\n\u003C/template>\n```\n\nTriggers type error:\n\n```\nType '{ file: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise\u003CArrayBuffer>; slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob; stream: () => ReadableSt...' is not assignable to type 'Partial\u003C{ file: File; }>'\n```\n\nExpected: it's allowed to have a form with a schema that requires a file to be selected.\n\n### Additional context\n\nIn fact, I believe this is a much broader problem. Why is the `state` typed as `Partial\u003CInferInput\u003CS>> ` in the first place? The type of the fields does not always match the schema. Basically, that's the point of schema in the first place, to perform validation — and not only value, but also the type. Consider number input value:\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\"\n\nconst fields = reactive({\n // Type used by \u003Cinput v-model=\"...\" type=\"number\">\n // It saves empty string for non-numbers.\n foo: \"\" as number | \"\",\n})\n\nconst schema = z.object({\n // But we need the actual number for the input data.\n foo: z.number(),\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cu-form :state=\"fields\" :schema=\"schema\">\n \u003Cinput v-model=\"fields.foo\" type=\"number\" />\n \u003C/u-form>\n\u003C/template>\n```\n\nThis leads to similar type error:\n\n```\nType '{ foo: number | \"\"; }' is not assignable to type 'Partial\u003C{ foo: number; }>'.\n Types of property 'foo' are incompatible.\n Type 'number | \"\"' is not assignable to type 'number | undefined'.\n Type 'string' is not assignable to type 'number'.\n```\n\nAs I see it, `state` should be untyped/unknown.\n\n### Logs\n\n```shell-script\n\n```",[3201,3202],{"name":3172,"color":3173},{"name":3175,"color":3176},5204,"UFile (and others!) type error when used with schema validation","2025-10-10T06:07:16Z","https://github.com/nuxt/ui/issues/5204",0.7077424,{"description":3209,"labels":3210,"number":3213,"owner":3178,"repository":3179,"state":3180,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Description\n\nthis should not be required. I was able to work around a similar issue in https://github.com/nuxt-content/docus/pull/1161.\n",[3211,3212],{"name":3172,"color":3173},{"name":3175,"color":3176},4926,"remove requirement for `shamefully-hoist=true`","2025-09-08T16:57:09Z","https://github.com/nuxt/ui/issues/4926",0.7186211,{"description":3219,"labels":3220,"number":3223,"owner":3178,"repository":3179,"state":3180,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v20.11.1`\n- Nuxt Version: `-`\n- CLI Version: `3.28.0`\n- Nitro Version: `-`\n- Package Manager: `npm@10.2.4`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nBoth\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.2, but applies for v4 as well\n\n### Reproduction\n\n[Vue SFC Playground reproduction](https://play.vuejs.org/#eNp9kTFPwzAQhf+K5amVqkQIppJWBVQkGKCisHkJ6TW4JLZln0OkKP+ds6OEDqibfd+7u/fsjt8ZkzQe+JJnrrDSIHOA3rAqV+VKcHSCr4WStdEWWccs5AXKBljPjlbXTHBqFvx2knw8aluPbKN8i6mXaaGJKlDo0sDDxtgkVKGVo52YI7DVNH7W9XPCA9Rq7z9ricRnc7Zasx1Nlw4SC05XJL4K2iwd/JNbuiDUpqKZdGMsG0wthy0bF6dRuHGw4CwlYZaedfEFZaf9R1kmJ6cVPVAXZgkessgK7KtBSf4EX7JIAsurSv88xxpaD4uxXnxB8f1P/eTaUBN8R1nANvQqE8PclkDeAt7uX6Cl8wRrffAVqS/At/A6PngcZPdeHcj2mS66fYr/JlX57rYtgnJjqGA0KPuojx/9cCH6n93r5Cb2CdXz/hdp+c1W) (runtime is not required, issue is with types -- wait a bit until they load completely).\n\nCode:\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { reactive } from \"vue\";\nimport UForm from \"@nuxt/ui/components/Form.vue\";\n\nconst state = reactive({});\nconst onSubmit = () => Promise.resolve(1);\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm :state @submit=\"onSubmit\" />\n\u003C/template>\n```\n\nError:\n```\nType '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))'.\n Type '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & (() => void | Promise\u003Cvoid>)'.ts(2322)\nForm.vue.d.ts(59, 18): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent\u003CNonNullable\u003C{ onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003C...>)); ... 11 more ...; class?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps>, { ...; }, \"onSubmit\", \"submit\", \"submi...'\n---\n(property) onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))\n```\n\n### Description\n\n`\u003CUForm>`s `@submit` event handler type require that it does not return any value. This is needlessly constraining.\n\n### Additional context\n\nThis is not required by the implementation, but instead wholly caused by the types of `onSubmit` property:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L53\n\nResult of the `onSubmit` prop is not used at all:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L243\n\nReplacing the type of `onSubmit` with this should be enough:\n```typescript\nexport interface FormProps\u003CS extends FormSchema, T extends boolean = true> {\n // ...\n onSubmit?: (event: FormSubmitEvent\u003CFormData\u003CS, T>>) => unknown\n}\n```\nThis should still allow passing event handlers without arguments.\n\n### Logs\n\n```shell-script\n\n```",[3221,3222],{"name":3172,"color":3173},{"name":3175,"color":3176},4873,"`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.71975064,{"description":3229,"labels":3230,"number":3239,"owner":3178,"repository":3179,"state":3240,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.1.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.0`\n- Nitro Version: `2.11.8`\n- Package Manager: `yarn@4.7.0`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `components`, `app`, `css`, `runtimeConfig`, `compatibilityDate`, `nitro`, `vite`, `eslint`\n- Runtime Modules: `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/ui@3.0.2`, `dayjs-nuxt@2.1.11`, `@nuxt/eslint@1.3.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/festive-feather-mzq49q\n\nIn the second select (which is wrapped in a form tag), don't select anything, and click save to submit the form.\n\nIt should show the browser \"this input is required\" tooltip.\n\n### Description\n\nI can't really understand why/how this happens. Sometimes, the `required` prop on a Select component will not prevent the form to be submitted. But sometimes it's working fine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3231,3232,3233,3234,3237],{"name":3172,"color":3173},{"name":3190,"color":3191},{"name":3175,"color":3176},{"name":3235,"color":3236},"closed-by-bot","ededed",{"name":3238,"color":3236},"stale",3882,"closed","Select required sometimes not working","2025-08-12T02:12:49Z","https://github.com/nuxt/ui/issues/3882",0.66072667,{"description":3246,"labels":3247,"number":3250,"owner":3178,"repository":3179,"state":3240,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.18.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `npm@11.5.2`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `devtools`, `supabase`, `css`, `routeRules`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui-pro@3.3.3`, `@vueuse/nuxt@13.9.0`, `@nuxtjs/supabase@1.6.2`, `nuxt-charts@0.2.3`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/zen-euclid-cf554n\n\n### Description\n\nThe problem occurs because the UFileUpload component likely contains a button element that doesn't have an explicit type attribute, causing it to default to type=\"submit\", which triggers form submission.\n\n### Additional context\n\n```\n\u003Ccomponent\n :is=\"variant === 'button' ? 'button' : 'div'\"\n ref=\"dropzoneRef\"\n :type=\"variant === 'button' ? 'button' : undefined\" // 👈 add this maybe?\n :role=\"variant === 'button' ? undefined : 'button'\"\n :data-dragging=\"isDragging\"\n :class=\"ui.base({ class: props.ui?.base })\"\n :tabindex=\"interactive && !disabled ? 0 : -1\"\n @click=\"interactive && !disabled && open()\" \n @keydown.prevent\n @keyup.enter.space=\"interactive && !disabled && open()\"\n>\n```\n\n### Logs\n\n```shell-script\n\n```",[3248,3249],{"name":3172,"color":3173},{"name":3190,"color":3191},4935,"UFileUpload with variant button inside form will cause UForm submit","2025-09-09T14:55:29Z","https://github.com/nuxt/ui/issues/4935",0.67238903,{"description":3256,"labels":3257,"number":3264,"owner":3178,"repository":3179,"state":3240,"title":3265,"updated_at":3266,"url":3267,"score":3268},"### Environment\n\n\"@nuxt/ui\": \"^4.0.0\"\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.0\n\n### Reproduction\n\n1. Add UFileUpload to a form\n2. Navigate to it with tab\n3. Press tab or shift tab again - focus is stuck\n\nReproducible on any file upload in documentation https://ui.nuxt.com/docs/components/file-upload\n\n\n### Description\n\nFileUpload component captures focus and disables tab navigation. This is due to `@keydown.prevent` on `runtime/components/FileUpload.vue:202`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3258,3259,3261],{"name":3172,"color":3173},{"name":3260,"color":3191},"v4",{"name":3262,"color":3263},"p3-low","0E8A16",5102,"FileUpload component captures focus and disables tab navigation","2025-10-03T08:13:44Z","https://github.com/nuxt/ui/issues/5102",0.6858474,{"description":3270,"labels":3271,"number":3276,"owner":3178,"repository":3179,"state":3240,"title":3277,"updated_at":3278,"url":3279,"score":3280},"### Description\n\nI have a file field **without** `v-model`, then I select a file. I have another field with a validation error. On submit, the validation error is shown on the email field and the file field is cleared. Is this a bug or a feature. With version `3.2.0` this behaviour does not exist. In `3.3.0` it does. It might be related to one of the dependencies though, because if I first upgrade to 3.3.0 and then go back to 3.2.0, where the lockfile still shows a lot of changes, the problem still exists.\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { FormError, FormSubmitEvent } from '#ui/types'\n\nconst state = reactive({\n email: undefined,\n file: undefined,\n})\n\nconst validate = (): FormError[] => {\n const errors = []\n errors.push({ name: 'email', message: 'Required' })\n return errors\n}\n\nasync function onSubmit(event: FormSubmitEvent\u003Ctypeof state>) {\n console.log(event.data)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm\n :validate=\"validate\"\n :state=\"state\"\n class=\"space-y-4\"\n @submit=\"onSubmit\"\n\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"File\" name=\"file\">\n \u003CUInput type=\"file\" />\n \u003C/UFormField>\n\n \u003CUButton type=\"submit\"> Submit \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```",[3272,3275],{"name":3273,"color":3274},"question","d876e3",{"name":3190,"color":3191},4637,"File field gets cleared, bug?","2025-08-21T08:42:25Z","https://github.com/nuxt/ui/issues/4637",0.6863355,{"description":3282,"labels":3283,"number":3290,"owner":3178,"repository":3178,"state":3240,"title":3291,"updated_at":3292,"url":3293,"score":3294},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.2\n- Nuxt Version: 3.17.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: css, build, vite, sourcemap, pages, components, routeRules, runtimeConfig, modules, critters, security, nitro, i18n, compatibilityDate\n- Runtime Modules: @nuxtjs/i18n@9.3.3, nuxt-security@1.1.0, @nuxtjs/critters@0.8.0, @nuxt/image@1.3.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nconst file = new File([\"Hello, world!\"], \"my-file.txt\", { type: \"text/plain\" }); //used for reproduction - in actual code this is passed through a model reference from the file input component\nlet form = new FormData();\nform.append('file', file); // file is included as part of the form where File is an uploaded file\n const requestOptions = {\n method: \"POST\",\n body: form,\n };\n const { data, pending, error } = await useFetch(\"endpoint to upload to\", requestOptions);\n\n### Describe the bug\n\nAfter upgrading to Nuxt 3.17.2, we are getting an error \"Error: Cannot serialize File\" when uploading. \n\n### Additional context\n\nWe use Vuetify v3.7.19 for the file input capability. Reverting to 3.16.1 fixes this issue. \n\n### Logs\n\n```shell-script\n\n```",[3284,3287],{"name":3285,"color":3286},"pending triage","E99695",{"name":3288,"color":3289},"possible regression","B90A42",32059,"Files unable to upload after upgrade from 3.16.1 - 3.17.2","2025-05-09T13:21:52Z","https://github.com/nuxt/nuxt/issues/32059",0.6890703,["Reactive",3296],{},["Set"],["ShallowReactive",3299],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTKQ9efq9Edz7XAWEJylQvr78G9fL82jCol4gjRu_Cf0":-1},"/nuxt/ui/5210"]