[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

repro.mp4

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! Too fix it we could block the form field injection in the useFormField composable so inputs inside other inputs won't inherit them.

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