fix(QIput): do not change overflow on autogrow textarea because it br…

…eaks undo and does not compute size as expected #14344, #14263, #13196 (#14397)
quasarframework · Sep 15, 2022 · 24ffd09 · 24ffd09
1 parent 3438b4e
commit 24ffd09
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
@@ -282,21 +282,24 @@ export default Vue.extend({
 
     // textarea only
     __adjustHeight () {
-      const inp = this.$refs.input
-      if (inp !== void 0) {
-        const parentStyle = inp.parentNode.style
-        const { overflow } = inp.style
-
-        // reset height of textarea to a small size to detect the real height
-        // but keep the total control size the same
-        parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
-        inp.style.height = '1px'
-        inp.style.overflow = 'hidden'
-
-        inp.style.height = inp.scrollHeight + 'px'
-        inp.style.overflow = overflow
-        parentStyle.marginBottom = ''
-      }
+      requestAnimationFrame(() => {
+        const inp = this.$refs.input
+        if (inp !== void 0) {
+          const parentStyle = inp.parentNode.style
+          const { overflow } = inp.style
+
+          // reset height of textarea to a small size to detect the real height
+          // but keep the total control size the same
+          // Firefox rulez #14263, #14344
+          this.$q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
+          inp.style.height = '1px'
+          parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
+
+          inp.style.height = inp.scrollHeight + 'px'
+          inp.style.overflow = overflow
+          parentStyle.marginBottom = ''
+        }
+      })
     },
 
     __onChange (e) {