SelectMenu emits invalid native Event on @change (missing target.value)

[tosbatti]

Environment

• Operating System: Darwin
• Node Version: v22.18.0
• Nuxt Version: 3.18.1
• CLI Version: 3.27.0
• Nitro Version: 2.11.13
• Package Manager: yarn@4.0.2
• Builder: -
• User Config: devServer, typescript, compatibilityDate, ssr, modules, colorMode, devtools, app, imports, nitro, sourcemap, auth, runtimeConfig, vite, pwa, experimental, dayjs, css, ui
• Runtime Modules: @nuxt/ui-pro@3.2.0, nuxt-svgo@4.2.4, @vueuse/nuxt@13.5.0, @sidebase/nuxt-auth@1.0.2, @nuxt/fonts@0.11.4, @vite-pwa/nuxt@1.0.4, dayjs-nuxt@2.1.11
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v3.x

Version

v3.2.0

Reproduction

Just exec: new Event('change', { target: { value: 'foo' } }) as the source code does here.

The created event has a null target (and obviously no accessible value).

Description

When listening to the @change event emitted by SelectMenu, the handler receives a native Event instance that has no usable payload — event.target is null, and therefore event.target.value is undefined.

The component currently creates the event using:

const event = new Event('change', { target: { value } })
emit('change', event)

However, the second argument of the Event constructor only accepts { bubbles, cancelable, composed }.
As a result, the target property is ignored, and the emitted event is essentially empty.

Expected behavior

The @change event should provide access to the selected value or a proper payload.

Additional notes

In a sense, this seems like a known bug — or perhaps even an intentional behavior (given the @ts-expect-error) — however, I don’t see the point of emitting an event that’s effectively useless.

Moreover, my (legitimate, I believe) intent was to distinguish an event triggered by user interaction from a value change caused by other factors. There also seems to be (at least as far as I can tell) an intention in the source code to give the change event this specific meaning:

if (toRaw(props.modelValue) === value) {
	return
}

but in practice, the event ends up being useless — it can’t even be used as a simple trigger to read the model value, since the model hasn’t been updated yet at that point.

Additional context

No response

Logs

[tosbatti]

The bug is valid, but I have to admit I misunderstood one point.

It seems that the update:modelValue event is also emitted only as a result of user actions, meaning that a programmatic change to the model does not trigger the event.
In that sense, it should be equivalent to the change event.
Could you please confirm this point? Thank you.

In this example, reset does not emit update:modelValue:

<script setup lang="ts">
const people = [
    'Wade Cooper',
    'Arlene Mccoy',
    'Devon Webb',
    'Tom Cook',
    'Tanya Fox',
    'Hellen Schmidt',
    'Caroline Schultz',
    'Mason Heaney',
    'Claudie Smitham',
    'Emil Schaefer',
];

const selected = ref(people[0]);

const onChange = (value: any): void => {
    console.log('change', value);
};

const onUpdateModel = (value: any): void => {
    console.log('updateModel', value);
};

const onReset = (): void => {
    selected.value = people[0];
};
</script>

<template>
    <div>
        <USelectMenu v-model="selected" :items="people" @change="onChange" @update:model-value="onUpdateModel" />
        <UButton label="reset" @click="onReset" />
    </div>
</template>