UInput Component Lacks Proper Handling of compositionstart and compositionend

[smile-alive]

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: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected], @vueuse/[email protected], @nuxt/[email protected], @pinia/[email protected], [email protected]
• 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>

Logs