\n\nExpected: the submit handler is called.\n\n### Description\n\n`\u003Cu-file-upload required />` prevents the form submit. The field is considered not filled regardless of whether the file is actually selected or not.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3172,3175],{"name":3173,"color":3174},"bug","d73a4a",{"name":3176,"color":3177},"triage","ffffff",5210,"nuxt","ui","open","UFileUpload \"required\" flag shows error when file is selected","2025-10-11T07:08:50Z","https://github.com/nuxt/ui/issues/5210",0.7357405,{"description":3187,"labels":3188,"number":3194,"owner":3179,"repository":3180,"state":3181,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\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, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fragrant-fog-7ck4yf\n\nThe schema specifies that the items within the list must be numbers, and the UForm catches the error (displayed in the UAlert below), but the UInputTag object doesn't display it\n\n\u003Cimg width=\"780\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9594e307-2f7d-4928-b877-d08795abc4b5\" />\n\n### Description\n\nThe UInputTag element does not correctly render the error text for schema validation errors for pattern matching of the individual items within its array. \n\nIt works fine showing an error about the length of the array, but not about problems for the items within the array.\n\n\u003Cimg width=\"779\" height=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cf031108-314b-4fd5-9859-cd275b8d3410\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3189,3190,3193],{"name":3173,"color":3174},{"name":3191,"color":3192},"v3","49DCB8",{"name":3176,"color":3177},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.75580156,{"description":3200,"labels":3201,"number":3204,"owner":3179,"repository":3180,"state":3181,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: -\n- CLI Version: 3.29.3\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\n4.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/trusting-lake-gqz9yc\n\n1. Select a file\n2. Unselect a file (click X)\n3. You will see that `typeof value` becomes `undefined`\n\n### Description\n\nThe `UFileUpload` model value is documented to be `null | File | File[]`.\n\nHowever in reality, it emits `undefined` on file unselect.\n\nExpected: there is certainty about the model value. It either uses `null` for empty value (which I think makes more sense in this particular case, because the value is defined, it's just empty), or `undefined` (but then never `null`). In either case, the behavior, types, and documentation should all match.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3202,3203],{"name":3173,"color":3174},{"name":3176,"color":3177},5202,"UFileUpload uses undefined instead of null, contradicts documentation","2025-10-10T03:33:48Z","https://github.com/nuxt/ui/issues/5202",0.7567111,{"description":3210,"labels":3211,"number":3217,"owner":3179,"repository":3180,"state":3218,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\n\n- Nuxt version: 3.15.1\n- Packet manager: pnpm@9.1\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nui-pro@f530918a14f2522e7126776c1d6f772ec8f8227c\n\n### Reproduction\n\nCode example on the description.\n\n### Description\n\nI’ve encountered an issue with the UDropdownMenu component where it only functions correctly when another component (in this case, a button within a UTooltip) is present. When the dropdown is used by itself (i.e., without the additional “Fisrt” button), it does not open upon interaction.\n\n**Steps to Reproduce:**\n\n1. Working Example (Dropdown works):\n\n```vue\n\u003Ctemplate>\n \u003CUTooltip>\n \u003CUButton label=\"Fisrt\" />\n \u003C/UTooltip>\n \u003CUDropdownMenu :items=\"[items, actions]\">\n \u003CUButton label=\"Second\" />\n \u003C/UDropdownMenu>\n\u003C/template>\n\n\u003Cscript setup>\nconst actions = [\n {\n label: 'Create team',\n icon: 'i-heroicons-plus-circle'\n },\n {\n label: 'Manage teams',\n icon: 'i-heroicons-cog-8-tooth'\n }\n]\n\nconst items = ref([\n {\n label: 'Profile',\n icon: 'i-lucide-user'\n },\n {\n label: 'Billing',\n icon: 'i-lucide-credit-card'\n },\n {\n label: 'Settings',\n icon: 'i-lucide-cog'\n }\n])\n\u003C/script>\n```\n\n2. Non-Working Example (Dropdown fails):\nRemove the “Fisrt” button and its wrapping UTooltip so that only the dropdown remains:\n\n\n```vue\n\u003Ctemplate>\n \u003C!-- Removed UTooltip and the first button -->\n \u003CUDropdownMenu :items=\"[items, actions]\">\n \u003CUButton label=\"Second\" />\n \u003C/UDropdownMenu>\n\u003C/template>\n\n\u003Cscript setup>\nconst actions = [\n {\n label: 'Create team',\n icon: 'i-heroicons-plus-circle'\n },\n {\n label: 'Manage teams',\n icon: 'i-heroicons-cog-8-tooth'\n }\n]\n\nconst items = ref([\n {\n label: 'Profile',\n icon: 'i-lucide-user'\n },\n {\n label: 'Billing',\n icon: 'i-lucide-credit-card'\n },\n {\n label: 'Settings',\n icon: 'i-lucide-cog'\n }\n])\n\u003C/script>\n```\n\nIn the first scenario, the dropdown opens and displays the items as expected.\n\nIn the second scenario, clicking on the button inside the UDropdownMenu does not open the dropdown.\n\nThe UDropdownMenu should work independently. Removing unrelated components (like the UTooltip with the “Fisrt” button) should not affect its functionality.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3212,3213,3216],{"name":3173,"color":3174},{"name":3214,"color":3215},"duplicate","cfd3d7",{"name":3191,"color":3192},3344,"closed","DropdownMenu has a buggy behaviour related with other components","2025-02-19T01:59:03Z","https://github.com/nuxt/ui/issues/3344",0.7109456,{"description":3224,"labels":3225,"number":3230,"owner":3179,"repository":3180,"state":3218,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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```",[3226,3229],{"name":3227,"color":3228},"question","d876e3",{"name":3191,"color":3192},4637,"File field gets cleared, bug?","2025-08-21T08:42:25Z","https://github.com/nuxt/ui/issues/4637",0.73037076,{"description":3236,"labels":3237,"number":3244,"owner":3179,"repository":3180,"state":3218,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nHow can i use [Zod](https://zod.dev/) to validate an [UInput file field](https://ui.nuxt.com/components/input#type)? \n\nLet's say you have the following code:\n(I found the example over [here](https://blog.stackademic.com/upgrade-your-full-stack-form-validation-with-zod-and-react-hook-form-in-next-js-107b014628a3).)\n\n```vue\n\u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\">\n\n \u003CUFormGroup name=\"picture\" label=\"Picture\">\n \u003CUInput v-model=\"state.picture\" type=\"file\" @change=\"onChangeFile\"/>\n \u003C/UFormGroup>\n\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n\n\u003C/UForm>\n```\n\n```ts\n\u003Cscript setup lang=\"ts\">\n import { z } from 'zod';\n\n const state = reactive({\n picture: undefined,\n })\n\n const schema = z.object({\n picture: z.custom\u003CFileList>()\n .transform((val) => {\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n })\n .superRefine((file, ctx) => {\n if (!(file instanceof File)) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n fatal: true,\n message: 'Not a file',\n });\n return z.NEVER;\n }\n if (file.size > 5 * 1024 * 1024) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'Max file size allowed is 5MB',\n });\n }\n if (\n !['image/jpeg', 'image/png', 'image/webp', 'image/jpg'].includes(\n file.type\n )\n ) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'File must be an image (jpeg, jpg, png, webp)',\n });\n }\n })\n });\n\n type Schema = z.infer\u003Ctypeof schema>;\n\n async function onSubmit (event: FormSubmitEvent\u003CSchema>) {\n console.log(event.data);\n }\n\u003C/script>\n```\n\nAs aspected the following onChange function logs a FileList\n\n```ts\nfunction onChangeFile(event: Event) {\n console.log(event)\n}\n```\n\nBut when I log val in the transform function of Zod\n\n```ts\n.transform((val) => {\n console.log(val);\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n})\n```\n\nI get a string like this:\n\n```\nC:\\fakepath\\Screenshot 2024-10-25 at 10.26.36.png\n```\n\nCan someone please help me out, i'm looking for a few days now for a solution.",[3238,3239,3242],{"name":3227,"color":3228},{"name":3240,"color":3241},"closed-by-bot","ededed",{"name":3243,"color":3241},"stale",2462,"UInput with type='file', how to validate with Zod?","2025-06-18T09:05:55Z","https://github.com/nuxt/ui/issues/2462",0.7316168,{"description":3250,"labels":3251,"number":3257,"owner":3179,"repository":3180,"state":3218,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Description\n\nIn v2 there was the option to validate a form only when submitting:\n\n```html\n\u003CUForm\n :schema\n :state\n :validate-on=\"['submit']\"\n>\n```\n\nWith v3 this option is gone. Can it be brought back?\n\n### Additional context\n\nI once read that form validation / show errors on submit and on blur are the best user experiences (depending on usecase) but the first one isnt possible anymore?\n\nRelated: https://github.com/nuxt/ui/issues/3853",[3252,3255,3256],{"name":3253,"color":3254},"enhancement","a2eeef",{"name":3191,"color":3192},{"name":3176,"color":3177},4540,"Docs: Form validate on-submit","2025-07-22T19:11:45Z","https://github.com/nuxt/ui/issues/4540",0.7531546,{"description":3263,"labels":3264,"number":3268,"owner":3179,"repository":3180,"state":3218,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Description\n\nI see in the [examples](https://ui.nuxt.com/components/form) form validation errors appear only for fields what were used by the user - just initialized form will all fields required will not be all in red, errors appear only on fields I left empty or when I try to submit form.\r\n\r\nThis behavior does not work in my project. Here it shows required errors everywhere when I change the first field.\r\n\r\nHow this „used field“ detection works? What to do to not break it?\r\n\r\nThank you for help.",[3265,3266,3267],{"name":3227,"color":3228},{"name":3240,"color":3241},{"name":3243,"color":3241},1815,"How validation hides errors for not yet used fields","2025-06-19T02:12:24Z","https://github.com/nuxt/ui/issues/1815",0.75458306,{"description":3274,"labels":3275,"number":3279,"owner":3179,"repository":3179,"state":3218,"title":3280,"updated_at":3281,"url":3282,"score":3283},"Module build failed: ValidationError: PostCSS Loader Invalid Options\r\n\r\noptions['useConfigFile'] is an invalid additional property\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2645\">#c2645\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3276],{"name":3277,"color":3278},"2.x","d4c5f9",3054,"Module build failed: ValidationError: PostCSS Loader Invalid Options options['useConfigFile'] is an invalid additional property","2023-01-18T16:09:56Z","https://github.com/nuxt/nuxt/issues/3054",0.75611323,{"description":3285,"labels":3286,"number":3289,"owner":3179,"repository":3180,"state":3218,"title":3290,"updated_at":3291,"url":3292,"score":3293},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm using the FormGroup component, and I've set the error to true, however unless it contains a non-empty text value the error slot won't render. Is this intentional or a bug? I would tend to think it's the latter.\n\n```\n\u003CUFormGroup :error=\"true\">\n \u003Ctemplate #error>\n \u003Cdiv>I will not render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```\n\n```\n\u003CUFormGroup :error=\"true && 'some error'\">\n \u003Ctemplate #error>\n \u003Cdiv>I will render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```",[3287,3288],{"name":3173,"color":3174},{"name":3243,"color":3241},2634,"FormGroup error with error slot","2025-06-14T15:36:58Z","https://github.com/nuxt/ui/issues/2634",0.75774604,["Reactive",3295],{},["Set"],["ShallowReactive",3298],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNoH8daR9YrdDA_7BpcFdVgrekxqZpl3UXAgGJWehv10":-1},"/nuxt/ui/5146"]