UInput Component Lacks Proper Handling of compositionstart and compositionend

Environment

Operating System: Darwin
Node Version: v20.15.0
Nuxt Version: 3.14.159
CLI Version: 3.15.0
Nitro Version: 2.10.4
Package Manager: pnpm@9.13.2
Builder: -
User Config: default
Runtime Modules: @nuxt/eslint@0.4.0, @vueuse/nuxt@10.11.1, @nuxt/ui@2.19.2, @pinia/nuxt@0.5.5, nuxt-echarts@0.2.4
Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-8d9s2j?file=app.vue

Description

The UInput component does not handle compositionstart and compositionend events, resulting in issues for languages that rely on input composition, such as Chinese (e.g., Pinyin input). Vue’s default behavior for v-model on native input elements ensures that updates are delayed until the composition ends, preventing intermediate values from triggering updates. However, the UInput component currently lacks this mechanism, causing inconsistencies with Vue’s default form handling and leading to unexpected behavior during text composition.

Additional context

<template>
    <input v-model="keyword" />
</template>

<script setup>
    const keyword = ref('');

    watchEffect(() => {
        console.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);
    });
</script>

<template>
    <UInput v-model="keyword" />
</template>

<script setup>
    const keyword = ref('');

    watchEffect(() => {
        console.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);
    });
</script>

nuxt / ui