fix(VTextField): update model value immediately on input event

fixes #11243
vuetifyjs · Jul 13, 2022 · 0ea08f8 · 0ea08f8
1 parent f5823f7
commit 0ea08f8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -125,6 +125,9 @@ export const VTextField = genericComponent<new <T>() => {
         emit('click:clear', e)
       })
     }
+    function onInput (e: Event) {
+      model.value = (e.target as HTMLInputElement).value
+    }
 
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter || props.counterValue)
@@ -200,7 +203,8 @@ export const VTextField = genericComponent<new <T>() => {
 
                           <input
                             ref={ inputRef }
-                            v-model={ model.value }
+                            value={ model.value }
+                            onInput={ onInput }
                             v-intersect={[{
                               handler: onIntersect,
                             }, null, ['once']]}

diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -128,6 +128,9 @@ export const VTextarea = defineComponent({
         emit('click:clear', e)
       })
     }
+    function onInput (e: Event) {
+      model.value = (e.target as HTMLTextAreaElement).value
+    }
 
     const sizerRef = ref<HTMLTextAreaElement>()
     function calculateInputHeight () {
@@ -226,7 +229,8 @@ export const VTextarea = defineComponent({
                       <textarea
                         ref={ textareaRef }
                         class={ fieldClass }
-                        v-model={ model.value }
+                        value={ model.value }
+                        onInput={ onInput }
                         v-intersect={[{
                           handler: onIntersect,
                         }, null, ['once']]}