[USelectMenu] Validation events are triggered before change when wrapped in a custom component

[plushdohn]

Environment

• Operating System: Darwin
• Node Version: v23.4.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, imports, components, css, compatibilityDate, experimental, future
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0

Reproduction

https://codesandbox.io/p/devbox/recursing-browser-klwx46

Description

When a SelectMenu is wrapped in a custom component which is then consumed by FormField validation is triggered for an instant before the component goes back to its valid state.

I've tried to debug a bit and I think it's related to the fact that the SelectMenu uses Input and that input is firing a change event because it uses useFormField, even though that particular input should not be considered the "form field" in this instance.

Additional context

https://github.com/user-attachments/assets/75e8c84f-612e-48f0-bf9e-dcc1fe95ffcd

I'd like to open a PR and fix this myself but I'm not sure what the best approach it. Maybe Input could take a prop that allows it to not fire form events? i.e. ignore-form-events="true" so the SelectMenu would use it. This could also apply for other components that use primitive form inputs inside them (Command, InputMenu) etc.

Logs

[romhml]

I've tried to debug a bit and I think it's related to the fact that the SelectMenu uses Input and that input is firing a change event because it uses useFormField

I think that's it too! To fix it we could block the form field injection in the useFormField composable so inputs inside other inputs won't inherit it.

https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useFormField.ts#L26

[theunsa]

hi guys

i'm running into the same issue for my custom component that uses useFormField ... and similarly the culprit seems to be a nested UInput component in my custom component

we could block the form field injection in the useFormField composable

is there a fix for this yet or a current workaround?

[romhml]

@theunsa I just submitted a fix for it. In the meantime you can do something like this after using useFormField to block the injection to the nested UInput component:

provide('nuxt-ui.form-field', undefined)