[core] fix(TextArea): grow box vertically to show initial content (#3647

)

packages/core/src/components/forms/textArea.tsx

@@ -54,9 +54,16 @@ export interface ITextAreaState {
 /* istanbul ignore next */
 export class TextArea extends React.PureComponent<ITextAreaProps, ITextAreaState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.TextArea`;
-
     public state: ITextAreaState = {};
+    private internalTextAreaRef: HTMLTextAreaElement;
 
+    public componentDidMount() {
+        if (this.props.growVertically) {
+            this.setState({
+                height: this.internalTextAreaRef.scrollHeight,
+            });
+        }
+    }
     public render() {
         const { className, fill, inputRef, intent, large, small, growVertically, ...htmlProps } = this.props;
 
@@ -87,7 +94,7 @@ export class TextArea extends React.PureComponent<ITextAreaProps, ITextAreaState
                 {...htmlProps}
                 className={rootClasses}
                 onChange={this.handleChange}
-                ref={inputRef}
+                ref={this.handleInternalRef}
                 style={style}
             />
         );
@@ -104,4 +111,12 @@ export class TextArea extends React.PureComponent<ITextAreaProps, ITextAreaState
             this.props.onChange(e);
         }
     };
+
+    // hold an internal ref for growVertically
+    private handleInternalRef = (ref: HTMLTextAreaElement | null) => {
+        this.internalTextAreaRef = ref;
+        if (this.props.inputRef != null) {
+            this.props.inputRef(ref);
+        }
+    };
 }

packages/core/test/forms/textAreaTests.tsx

@@ -51,4 +51,18 @@ describe("<TextArea>", () => {
 
         assert.equal((textarea.getDOMNode() as HTMLElement).style.marginTop, "10px");
     });
+    it("can fit large initial content", () => {
+        const initialValue = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Aenean finibus eget enim non accumsan.
+        Nunc lobortis luctus magna eleifend consectetur.
+        Suspendisse ut semper sem, quis efficitur felis.
+        Praesent suscipit nunc non semper tempor.
+        Sed eros sapien, semper sed imperdiet sed,
+        dictum eget purus. Donec porta accumsan pretium.
+        Fusce at felis mattis, tincidunt erat non, varius erat.`;
+        const wrapper = mount(<TextArea growVertically={true} value={initialValue} style={{ marginTop: 10 }} />);
+        const textarea = wrapper.find("textarea");
+        const scrollHeightInPixels = `${(textarea.getDOMNode() as HTMLElement).scrollHeight}px`;
+        assert.equal((textarea.getDOMNode() as HTMLElement).style.height, scrollHeightInPixels);
+    });
 });