[Core] TextArea: fix style object regression (#3440)

palantir · Mar 22, 2019 · 353acf9 · 353acf9 · blueprint-bot · Mar 22, 2019
1 parent f396d57
commit 353acf9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/packages/core/src/components/forms/textArea.tsx b/packages/core/src/components/forms/textArea.tsx
@@ -61,21 +61,29 @@ export class TextArea extends React.PureComponent<ITextAreaProps, ITextAreaState
             className,
         );
 
-        const styleProps =
-            this.props.growVertically && this.state.height != null
-                ? {
-                      style: {
-                          height: `${this.state.height}px`,
-                      },
-                  }
-                : {};
+        // add explicit height style while preserving user-supplied styles if they exist
+        let { style = {} } = htmlProps;
+        if (growVertically && this.state.height != null) {
+            // this style object becomes non-extensible when mounted (at least in the enzyme renderer),
+            // so we make a new one to add a property
+            style = {
+                ...style,
+                height: `${this.state.height}px`,
+            };
+        }
 
         return (
-            <textarea {...htmlProps} {...styleProps} className={rootClasses} ref={inputRef} onChange={this.onChange} />
+            <textarea
+                {...htmlProps}
+                className={rootClasses}
+                onChange={this.handleChange}
+                ref={inputRef}
+                style={style}
+            />
         );
     }
 
-    private onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    private handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (this.props.growVertically) {
             this.setState({
                 height: e.target.scrollHeight,

diff --git a/packages/core/test/forms/textAreaTests.tsx b/packages/core/test/forms/textAreaTests.tsx
@@ -15,11 +15,7 @@ describe("<TextArea>", () => {
         const wrapper = mount(<TextArea growVertically={true} />);
         const textarea = wrapper.find("textarea");
 
-        textarea.simulate("change", {
-            target: {
-                scrollHeight: 500,
-            },
-        });
+        textarea.simulate("change", { target: { scrollHeight: 500 } });
 
         assert.equal((textarea.getDOMNode() as HTMLElement).style.height, "500px");
     });
@@ -36,4 +32,13 @@ describe("<TextArea>", () => {
 
         assert.equal((textarea.getDOMNode() as HTMLElement).style.height, "");
     });
+
+    it("doesn't clobber user-supplied styles", () => {
+        const wrapper = mount(<TextArea growVertically={true} style={{ marginTop: 10 }} />);
+        const textarea = wrapper.find("textarea");
+
+        textarea.simulate("change", { target: { scrollHeight: 500 } });
+
+        assert.equal((textarea.getDOMNode() as HTMLElement).style.marginTop, "10px");
+    });
 });