USelectMenu doesn't emit UForm.change as expected

[twinkelmann]

Environment

• Operating System: Linux
• Node Version: v20.16.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.7
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, css, vite, colorMode, nitro, future, compatibilityDate, hub, app, schemaOrg, i18n
• Runtime Modules: @nuxthub/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.16.1

Reproduction

https://codesandbox.io/p/devbox/dry-sun-8ddkqr

Description

The events of the USelectMenu do not work as intended. As you can see in the reproduction, the change event of the UForm is expected to be emitted every time you select/deselect/create an item, but instead it's emitted only a few seemingly random times.

Switching to the input event on the form has the same random behavior.

I am also surprised programmatically changing the list of values doesn't trigger the update event on the USelectMenu, but that could be by design and is not really the blocking issue here.

My reproduction code is a simplification of my real code. It is very similar to the documentation example for creating items, main difference is the multi selection. However the issue also occurs without multi selection.

Additional context

No response

Logs

[twinkelmann]

A few concrete examples to try on the reproduction yourself:

If the dropdown has 2 options and you alternate toggling both (first off, first on, second off, second on), the form change event will consistently get triggered on the unchecking of the option. It will not trigger on the checking of the option, and it will not trigger on the unchecking if you are toggling the same option multiple times in a row.

If you disable the first, then the second, then enable the second, then enable the first (or the exact opposite), you can repeat this loop and the event is never triggered.

[twinkelmann]

I suspect an issue in the code checking if the form's state changed before generating events (SelectMenu.vue:257,

function onUpdate(value: any) {
  if (toRaw(props.modelValue) === value) {  // <---- this condition ?
    return
  }
  // @ts-expect-error - 'target' does not exist in type 'EventInit'
  const event = new Event('change', { target: { value } })
  emits('change', event)
  emitFormChange()
  emitFormInput()
}

?), because even if I call form.value?.submit() manually when the field changed, the submit event does not fire more often than the update/input events.

Anyways I'm finding no workaround so I will have to implement something custom and dirty for now...

[romhml]

The form doesn't implement a @change event, it only support @error and @submit. Not sure why the event handler is even called in your example, I'll try to look into it.

The emitFormChange in the SelectMenu's code is here to trigger the Form's validation when its value changes.

To fix your issue, you should bind the @change event handler on your inputs.