\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.",[1984],{"name":1985,"color":1986},"question","d876e3",2462,"nuxt","ui","open","UInput with type='file', how to validate with Zod?","2025-03-10T01:51:18Z","https://github.com/nuxt/ui/issues/2462",0.6667235,{"description":1996,"labels":1997,"number":2004,"owner":1988,"repository":1989,"state":1990,"title":2005,"updated_at":2006,"url":2007,"score":2008},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI have a use case where I'd like this value to be `false`. Would it be possible to make this configurable?\n\n### Additional context\n\nhttps://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue#L30",[1998,2001],{"name":1999,"color":2000},"enhancement","a2eeef",{"name":2002,"color":2003},"triage","ffffff",2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2024-12-06T22:38:02Z","https://github.com/nuxt/ui/issues/2710",0.6738113,{"description":2010,"labels":2011,"number":2016,"owner":1988,"repository":1989,"state":1990,"title":2017,"updated_at":2018,"url":2019,"score":2020},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.7`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@nuxt/ui@2.19.2`, `@artmizu/nuxt-prometheus@2.4.0`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n### Version\n\nv2.21.1\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/select-menu#control-the-query\n\nTry to select `Wade` in the query input with mouse or trackpad \n\u003Cimg width=\"494\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a0e90d62-aabb-4d40-9d8d-a6fed67fee02\" />\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2012,2015],{"name":2013,"color":2014},"bug","d73a4a",{"name":2002,"color":2003},3583,"Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.6980368,{"description":2022,"labels":2023,"number":2027,"owner":1988,"repository":1988,"state":1990,"title":2028,"updated_at":2029,"url":2030,"score":2031},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.17.1`\r\n- Nuxt Version: `3.0.0-rc.12`\r\n- Nitro Version: `0.6.0`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `publicRuntimeConfig`, `privateRuntimeConfig`, `modules`, `css`, `typescript`, `alias`, `build`\r\n- Runtime Modules: `@nuxtjs/svg@0.1.12`, `nuxt-lodash@2.3.0`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\ncreate a server api\r\n`\\server\\routes\\webapi\\[...].post.ts`\r\n\r\ncontent:\r\n```\r\nexport default defineEventHandler(async (event) => {\r\ntry {\r\n const body = await useRawBody(event, false);\r\n\r\n const res = await $fetch(url + queryStr, {\r\n baseURL,\r\n method: \"POST\",\r\n body,\r\n });\r\n\r\n return res;\r\n } catch (error: any) {\r\n const err = createError({\r\n statusCode: error?.response?.status || 500,\r\n data: error?.data, --> error.data is: {message: 'please insert a valid amount for the current offer'}\r\n message: \"Error fetching from WebAPI, URL \" + url,\r\n });\r\n throw err;\r\n}\r\n});\r\n```\r\n\r\n\r\ncall the api using \r\n\r\n```\r\nconst formData= new FormData();\r\nformData.append('filename', fileContent);\r\n\r\n try {\r\n const { data, error } = await useFetch\u003CT>(url, {\r\n baseURL: \"/webapi\",\r\n method: \"POST\",\r\n body: formData\r\n });\r\n\r\n if (error && error.value != null) {\r\n throw error.value; --> here error.value.data is not the object i expect but is an html like: '\u003C!DOCTYPE html>\u003Chtml>\u003Chead>\u003Ctitle>400 - | Nuxt\u003C/title>\u003Cmeta charset=\"utf-8\">\u003Cmeta content=\"width=device-width,initial-scale=1,minimum-scale=1\" name=\"viewport\">\u003Cstyle>.spotlight{background:linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);opacity:0.8;filter:blur(30vh);height:60vh;bottom:-40vh}*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-r…dex.mjs:35:15)\u003C/span>\\n\u003Cspan class=\"stack\">at /D:/root_git/ale.frontend/.nuxt/dev/index.mjs:967:17\u003C/span>\\n\u003Cspan class=\"stack internal\">at processTicksAndRejections (node:internal/process/task_queues:96:5)\u003C/span>\\n\u003Cspan class=\"stack internal\">at async Object.handler (/D:/root_git/ale.frontend/node_modules/h3/dist/index.mjs:567:19)\u003C/span>\\n\u003Cspan class=\"stack internal\">at async Server.toNodeHandle (/D:/root_git/ale.frontend/node_modules/h3/dist/index.mjs:631:7)\u003C/span>\u003C/pre>\u003C/pre>\u003C/div>\u003C/body>\u003C/html>'\r\n\r\n }\r\n\r\n return data.value as T;\r\n } catch (err) {\r\n throw err;\r\n }\r\n };\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen calling a server route to try to upload a file to a backend (multipart/form-data header is present), if a error is thrown the data property of the error is not the expected object but the default HTML error by nuxt\r\nThis does not happen if the error is thrown when doing a normal POST/GET\r\n\r\n\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_",[2024],{"name":2025,"color":2026},"pending triage","E99695",15390,"Cannot retreive data from createError when uploading files","2024-06-30T11:10:00Z","https://github.com/nuxt/nuxt/issues/15390",0.72319764,{"description":2033,"labels":2034,"number":2040,"owner":1988,"repository":1989,"state":1990,"title":2041,"updated_at":2042,"url":2043,"score":2044},"### Description\n\nAdd a color prop similar to the one used in NavigationMenu, to allow changing the color of the active item\n\n### Additional context\n\n_No response_",[2035,2036,2039],{"name":1999,"color":2000},{"name":2037,"color":2038},"v3","49DCB8",{"name":2002,"color":2003},3052,"Add a color prop to UBreadcrumb","2025-02-23T19:20:02Z","https://github.com/nuxt/ui/issues/3052",0.73872143,{"description":2046,"labels":2047,"number":2050,"owner":1988,"repository":1989,"state":2051,"title":2052,"updated_at":2053,"url":2054,"score":2055},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2048,2049],{"name":2013,"color":2014},{"name":2037,"color":2038},3513,"closed","Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.6958623,{"description":2057,"labels":2058,"number":2061,"owner":1988,"repository":1989,"state":2051,"title":2062,"updated_at":2063,"url":2064,"score":2065},"### Environment\n\n\n\nI get this error anytime I try and use \u003CUInput /> even without any other code.\n\n### Version\n\nv3.0.0-alpha.5\n\n### Reproduction\n\n`\u003Ctemplate>\n \u003CUContainer>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Code\" name=\"Code\"\n >\u003CUInput v-model=\"state.code\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport type { FormSubmitEvent } from '#ui/types';\n\nconst supabase = useSupabaseClient();\nconst toast = useToast();\n\n//Form\nconst schema = z.object({\n code: z.string().min(3),\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n code: undefined,\n});\n\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({\n title: 'Success',\n description: 'The form has been submitted.',\n color: 'success',\n });\n console.log(event.data);\n}\n\u003C/script>\n`\n\n### Description\n\nUInput causes an error\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2059,2060],{"name":2013,"color":2014},{"name":2037,"color":2038},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.7079385,{"labels":2067,"number":2075,"owner":1988,"repository":1988,"state":2051,"title":2076,"updated_at":2077,"url":2078,"score":2079},[2068,2071,2072],{"name":2069,"color":2070},"3.x","29bc7f",{"name":2013,"color":2014},{"name":2073,"color":2074},"needs reproduction","FBCA04",12686,"bug on server/api side.","2023-01-19T16:09:51Z","https://github.com/nuxt/nuxt/issues/12686",0.7099828,{"description":2081,"labels":2082,"number":2083,"owner":1988,"repository":2084,"state":2051,"title":2085,"updated_at":2086,"url":2087,"score":2088},"After using `pnpm update` to upgrade vue to 3.4.3, the console throws a lot of `Hydration mismatch`. If I am using vue 3.3.13, no `Hydration mismatch` warnings will be thrown.\r\n\r\n\u003Cimg width=\"1402\" alt=\"SCR-20240103-qagg\" src=\"https://github.com/nuxt/nuxt.com/assets/133459587/188ac1c4-e19a-4570-a5d0-4863c92a7bda\">\r\n",[],1467,"nuxt.com","About vue@3.4.3 causing hydration mismatch","2024-05-03T00:34:36Z","https://github.com/nuxt/nuxt.com/issues/1467",0.72851706,{"description":2090,"labels":2091,"number":2094,"owner":1988,"repository":1989,"state":2051,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### Environment\n\n- Operating System: `macos`\n- Node Version: `v18.16.0`\n- Nuxt Version: `3.16.0\"`\n- Vue: \"3.5.0\",\n- Nuxt/ui\": \"3.0.0\",\n- CLI Version: `3.8.4`\n- Package Manager: `pnpm`\n- IDE: VS Code\n\n\n### Version\n\nv3\n\n### Reproduction\n\nin any expample, even in your ui template npx nuxi init -t ui \u003Cmy-app>\n\n\n\n### Description\n\ntailwind IntelliSense works only in attribute class of elements, but not works in :ui={...}. so to write classes in ui i need learn them all, for example. \n\n\n\n\n\n\n\n\ni tried to help tailwind IntelliSense by addnig classregex to vscode setttings, but it did not help\n\n\n\njust for test purpose, i add some classregex for [CVA](https://cva.style/docs/getting-started/installation) for check if it will work. and it work for cva, not for :ui={..}\nscreen for cva\n\n\n### Additional context\n\nmake it work please! for :ui={..} and for app.config.ts\n\n### Logs\n\n```shell-script\n\n```",[2092,2093],{"name":2013,"color":2014},{"name":2002,"color":2003},3570,"Tailwind CSS IntelliSense not works in :ui={} and in app.config.ts","2025-03-17T17:00:40Z","https://github.com/nuxt/ui/issues/3570",0.72966415,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"ixbCjDYiZeUMz8827HU2WVagA5jeqg_PnlvzrdN98jk":-1},"/nuxt/ui/3622"]