From 445df342d111612ff83acffa420aaf563fa69af0 Mon Sep 17 00:00:00 2001
From: Jonathan Roitgrund <jroitgrund@palantir.com>
Date: Thu, 7 Mar 2019 17:09:59 +0000
Subject: [PATCH] Add option to grow text area with input

---
 .../core/src/components/forms/text-inputs.md  |  4 +-
 .../core/src/components/forms/textArea.tsx    | 40 +++++++++++++++++--
 packages/core/test/forms/textAreaTests.tsx    | 39 ++++++++++++++++++
 packages/core/test/index.ts                   |  1 +
 4 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/test/forms/textAreaTests.tsx

diff --git a/packages/core/src/components/forms/text-inputs.md b/packages/core/src/components/forms/text-inputs.md
index 3f3343dbd2..31ccd37c4b 100644
--- a/packages/core/src/components/forms/text-inputs.md
+++ b/packages/core/src/components/forms/text-inputs.md
@@ -17,7 +17,7 @@ field.
 
 @### Props
 
-The `InputGroup` React component  supports one non-interactive icon on the left
+The `InputGroup` React component supports one non-interactive icon on the left
 side and one arbitrary element on the right side. Unlike the CSS approach,
 `InputGroup` supports _content of any length_ on the right side (not just
 icon buttons) because it is able to measure the content and ensure there is
@@ -45,6 +45,7 @@ the parent input.
 
     Conversely, the [`InputGroup`](#core/components/text-inputs.input-group) React
     component _does_ support arbitrary content in its right element.
+
 </div>
 
 @css input-group
@@ -63,6 +64,7 @@ Apply `Classes.INPUT` on a `<textarea>`, or use the `TextArea` React component.
 
 ```tsx
 <TextArea
+    growVertically={true}
     large={true}
     intent={Intent.PRIMARY}
     onChange={this.handleChange}
diff --git a/packages/core/src/components/forms/textArea.tsx b/packages/core/src/components/forms/textArea.tsx
index 9e6d3b61f3..2d9aad1051 100644
--- a/packages/core/src/components/forms/textArea.tsx
+++ b/packages/core/src/components/forms/textArea.tsx
@@ -25,19 +25,30 @@ export interface ITextAreaProps extends IIntentProps, IProps, React.TextareaHTML
      */
     small?: boolean;
 
+    /**
+     * Whether the text area should automatically grow vertically to accomodate content.
+     */
+    growVertically?: boolean;
+
     /**
      * Ref handler that receives HTML `<textarea>` element backing this component.
      */
     inputRef?: (ref: HTMLTextAreaElement | null) => any;
 }
 
+interface ITextAreaState {
+    height?: number;
+}
+
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-export class TextArea extends React.PureComponent<ITextAreaProps, {}> {
+export class TextArea extends React.PureComponent<ITextAreaProps, ITextAreaState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.TextArea`;
 
+    public state: ITextAreaState = {};
+
     public render() {
-        const { className, fill, inputRef, intent, large, small, ...htmlProps } = this.props;
+        const { className, fill, inputRef, intent, large, small, growVertically, ...htmlProps } = this.props;
 
         const rootClasses = classNames(
             Classes.INPUT,
@@ -50,6 +61,29 @@ export class TextArea extends React.PureComponent<ITextAreaProps, {}> {
             className,
         );
 
-        return <textarea {...htmlProps} className={rootClasses} ref={inputRef} />;
+        const styleProps =
+            this.props.growVertically && this.state.height != null
+                ? {
+                      style: {
+                          height: `${this.state.height}px`,
+                      },
+                  }
+                : {};
+
+        return (
+            <textarea {...htmlProps} {...styleProps} className={rootClasses} ref={inputRef} onChange={this.onChange} />
+        );
     }
+
+    private onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (this.props.growVertically) {
+            this.setState({
+                height: e.target.scrollHeight,
+            });
+        }
+
+        if (this.props.onChange != null) {
+            this.props.onChange(e);
+        }
+    };
 }
diff --git a/packages/core/test/forms/textAreaTests.tsx b/packages/core/test/forms/textAreaTests.tsx
new file mode 100644
index 0000000000..83b81632b7
--- /dev/null
+++ b/packages/core/test/forms/textAreaTests.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import { assert } from "chai";
+import { mount } from "enzyme";
+import * as React from "react";
+
+import { TextArea } from "../../src/index";
+
+describe("<TextArea>", () => {
+    it("can resize automatically", () => {
+        const wrapper = mount(<TextArea growVertically={true} />);
+        const textarea = wrapper.find("textarea");
+
+        textarea.simulate("change", {
+            target: {
+                scrollHeight: 500,
+            },
+        });
+
+        assert.equal((textarea.getDOMNode() as HTMLElement).style.height, "500px");
+    });
+
+    it("doesn't resize by default", () => {
+        const wrapper = mount(<TextArea />);
+        const textarea = wrapper.find("textarea");
+
+        textarea.simulate("change", {
+            target: {
+                scrollHeight: textarea.getDOMNode().scrollHeight,
+            },
+        });
+
+        assert.equal((textarea.getDOMNode() as HTMLElement).style.height, "");
+    });
+});
diff --git a/packages/core/test/index.ts b/packages/core/test/index.ts
index 27e674d43c..43a359fd15 100644
--- a/packages/core/test/index.ts
+++ b/packages/core/test/index.ts
@@ -26,6 +26,7 @@ import "./drawer/drawerTests";
 import "./editable-text/editableTextTests";
 import "./forms/fileInputTests";
 import "./forms/formGroupTests";
+import "./forms/textAreaTests";
 import "./hotkeys/hotkeysTests";
 import "./html-select/htmlSelectTests";
 import "./icon/iconTests";