fix(VTextfield): Have consistent IME behaviour as in Vue

fixes #18981
vuetifyjs · Mar 14, 2024 · ad2e3d6 · ad2e3d6
1 parent fbf7ec5
commit ad2e3d6
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -138,7 +138,9 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
         callEvent(props['onClick:clear'], e)
       })
     }
-    function onInput (e: Event) {
+    function onInput (e: InputEvent) {
+      if (e.isComposing) return
+
       const el = e.target as HTMLInputElement
       model.value = el.value
       if (
@@ -153,6 +155,10 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
       }
     }
 
+    function onCompositionend (e: CompositionEvent) {
+      model.value = e.data
+    }
+
     useRender(() => {
       const hasCounter = !!(slots.counter || (props.counter !== false && props.counter != null))
       const hasDetails = !!(hasCounter || slots.details)
@@ -214,6 +220,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                         ref={ inputRef }
                         value={ model.value }
                         onInput={ onInput }
+                        onCompositionend={ onCompositionend }
                         v-intersect={[{
                           handler: onIntersect,
                         }, null, ['once']]}