fix: Not shaking with autosize of TextArea (#18401)

* fix: Not shaking with autosize of TextArea

* fix ract 15 demo

* fix demo

* add state

* handle event

* try to fix react 15 test case

components/input/TextArea.tsx

@@ -45,7 +45,7 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
   componentDidUpdate(prevProps: TextAreaProps) {
     // Re-render with the new content then recalculate the height as required.
     if (prevProps.value !== this.props.value) {
-      this.resizeOnNextFrame();
+      this.resizeTextarea();
     }
   }
 

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -230,6 +230,13 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
     class="ant-input"
     placeholder="Autosize height with minimum and maximum number of lines"
   />
+  <div
+    style="margin:24px 0"
+  />
+  <textarea
+    class="ant-input"
+    placeholder="Controlled autosize"
+  />
 </div>
 `;
 

components/input/__tests__/index.test.js

@@ -79,6 +79,7 @@ describe('TextArea', () => {
     wrapper.setProps({ value: '1111' });
     jest.runAllTimers();
     expect(mockFunc).toHaveBeenCalledTimes(2);
+    wrapper.update();
     expect(wrapper.find('textarea').props().style.overflow).toBeFalsy();
   });
 

components/input/demo/autosize-textarea.md

@@ -18,15 +18,37 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-ReactDOM.render(
-  <div>
-    <TextArea placeholder="Autosize height based on content lines" autosize />
-    <div style={{ margin: '24px 0' }} />
-    <TextArea
-      placeholder="Autosize height with minimum and maximum number of lines"
-      autosize={{ minRows: 2, maxRows: 6 }}
-    />
-  </div>,
-  mountNode,
-);
+class Demo extends React.Component {
+  state = {
+    value: '',
+  };
+
+  onChange = ({ target: { value } }) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <div>
+        <TextArea placeholder="Autosize height based on content lines" autosize />
+        <div style={{ margin: '24px 0' }} />
+        <TextArea
+          placeholder="Autosize height with minimum and maximum number of lines"
+          autosize={{ minRows: 2, maxRows: 6 }}
+        />
+        <div style={{ margin: '24px 0' }} />
+        <TextArea
+          value={value}
+          onChange={this.onChange}
+          placeholder="Controlled autosize"
+          autosize={{ minRows: 3, maxRows: 5 }}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
 ```