fix: textarea shake #2005 #1964

Author: tangjinzhou

components/input/ResizableTextArea.jsx

@@ -9,6 +9,10 @@ import inputProps from './inputProps';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getListeners } from '../_util/props-util';
 
+const RESIZE_STATUS_NONE = 0;
+const RESIZE_STATUS_RESIZING = 1;
+const RESIZE_STATUS_RESIZED = 2;
+
 const TextAreaProps = {
   ...inputProps,
   autosize: PropTypes.oneOfType([Object, Boolean]),
@@ -20,7 +24,7 @@ const ResizableTextArea = {
   data() {
     return {
       textareaStyles: {},
-      resizing: false,
+      resizeStatus: RESIZE_STATUS_NONE,
     };
   },
   mixins: [BaseMixin],
@@ -39,6 +43,18 @@ const ResizableTextArea = {
     },
   },
   methods: {
+    handleResize(size) {
+      const { resizeStatus } = this.$data;
+      const { autoSize } = this.$props;
+
+      if (resizeStatus !== RESIZE_STATUS_NONE) {
+        return;
+      }
+      this.$emit('resize', size);
+      if (autoSize) {
+        this.resizeOnNextFrame();
+      }
+    },
     resizeOnNextFrame() {
       raf.cancel(this.nextFrameActionId);
       this.nextFrameActionId = raf(this.resizeTextarea);
@@ -51,11 +67,15 @@ const ResizableTextArea = {
       }
       const { minRows, maxRows } = autoSize;
       const textareaStyles = calculateNodeHeight(this.$refs.textArea, false, minRows, maxRows);
-      this.setState({ textareaStyles, resizing: true }, () => {
+      this.setState({ textareaStyles, resizeStatus: RESIZE_STATUS_RESIZING }, () => {
         raf.cancel(this.resizeFrameId);
         this.resizeFrameId = raf(() => {
-          this.setState({ resizing: false });
-          this.fixFirefoxAutoScroll();
+          this.setState({ resizeStatus: RESIZE_STATUS_RESIZED }, () => {
+            this.resizeFrameId = raf(() => {
+              this.setState({ resizeStatus: RESIZE_STATUS_NONE });
+              this.fixFirefoxAutoScroll();
+            });
+          });
         });
       });
     },
@@ -77,7 +97,7 @@ const ResizableTextArea = {
     renderTextArea() {
       const props = getOptionProps(this);
       const { prefixCls, autoSize, autosize, disabled } = props;
-      const { textareaStyles, resizing } = this.$data;
+      const { textareaStyles, resizeStatus } = this.$data;
       warning(
         autosize === undefined,
         'Input.TextArea',
@@ -104,7 +124,9 @@ const ResizableTextArea = {
       }
       const style = {
         ...textareaStyles,
-        ...(resizing ? { overflowX: 'hidden', overflowY: 'hidden' } : null),
+        ...(resizeStatus === RESIZE_STATUS_RESIZING
+          ? { overflowX: 'hidden', overflowY: 'hidden' }
+          : null),
       };
       const textareaProps = {
         attrs: otherProps,
@@ -119,7 +141,7 @@ const ResizableTextArea = {
         ],
       };
       return (
-        <ResizeObserver onResize={this.resizeOnNextFrame} disabled={!(autoSize || autosize)}>
+        <ResizeObserver onResize={this.handleResize} disabled={!(autoSize || autosize)}>
           <textarea {...textareaProps} ref="textArea" />
         </ResizeObserver>
       );

components/input/calculateNodeHeight.js

@@ -142,11 +142,6 @@ export default function calculateNodeHeight(
       height = Math.min(maxHeight, height);
     }
   }
-  // // Remove scroll bar flash when autosize without maxRows
-  // // donot remove in vue
-  // if (!maxRows) {
-  //   overflowY = 'hidden';
-  // }
   return {
     height: `${height}px`,
     minHeight: `${minHeight}px`,