fix(VTextField): use resize directive to recalculate elements width (#…

…11816)

* fix(VTextField): use resize directive to recalculate elements width

* refactor(VTextField): restructure to avoid multiple onResize calls

was called twice when mounting. normalized watchers and reduced
their overall footprint.

Co-authored-by: John Leider <john.j.leider@gmail.com>

packages/vuetify/src/components/VTextField/VTextField.ts

@@ -14,6 +14,7 @@ import Loadable from '../../mixins/loadable'
 import Validatable from '../../mixins/validatable'
 
 // Directives
+import resize from '../../directives/resize'
 import ripple from '../../directives/ripple'
 
 // Utilities
@@ -28,9 +29,7 @@ const baseMixins = mixins(
   VInput,
   Intersectable({
     onVisible: [
-      'setLabelWidth',
-      'setPrefixWidth',
-      'setPrependWidth',
+      'onResize',
       'tryAutofocus',
     ],
   }),
@@ -52,7 +51,10 @@ const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', '
 export default baseMixins.extend<options>().extend({
   name: 'v-text-field',
 
-  directives: { ripple },
+  directives: {
+    resize,
+    ripple,
+  },
 
   inheritAttrs: false,
 
@@ -227,9 +229,7 @@ export default baseMixins.extend<options>().extend({
 
   mounted () {
     this.autofocus && this.tryAutofocus()
-    this.setLabelWidth()
-    this.setPrefixWidth()
-    this.setPrependWidth()
+
     requestAnimationFrame(() => (this.isBooted = true))
   },
 
@@ -396,6 +396,11 @@ export default baseMixins.extend<options>().extend({
           keydown: this.onKeyDown,
         }),
         ref: 'input',
+        directives: [{
+          name: 'resize',
+          modifiers: { quiet: true },
+          value: this.onResize,
+        }],
       })
     },
     genMessages () {
@@ -511,5 +516,10 @@ export default baseMixins.extend<options>().extend({
         this.$emit('change', this.lazyValue)
       }
     },
+    onResize () {
+      this.setLabelWidth()
+      this.setPrefixWidth()
+      this.setPrependWidth()
+    },
   },
 })