fix(TextArea): fix TextArea's height not shrinking on delete (Semanti…

…c-Org#3418)

  * add test to check for shrinking when newline deleted

src/addons/TextArea/TextArea.js

@@ -45,6 +45,8 @@ class TextArea extends Component {
     rows: 3,
   }
 
+  initialHeight = null
+
   componentDidMount() {
     this.updateHeight()
   }
@@ -82,11 +84,22 @@ class TextArea extends Component {
     this.ref.style.resize = null
   }
 
+  setInitialHeight(height) {
+    if (!this.initialHeight) {
+      this.initialHeight = height
+    }
+  }
+
   updateHeight = () => {
     const { autoHeight } = this.props
     if (!this.ref || !autoHeight) return
 
-    const { minHeight, borderBottomWidth, borderTopWidth } = window.getComputedStyle(this.ref)
+    const { minHeight, borderBottomWidth, borderTopWidth, height } = window.getComputedStyle(
+      this.ref,
+    )
+
+    this.setInitialHeight(height)
+    this.ref.style.height = this.initialHeight
 
     const borderHeight = _.sum([borderBottomWidth, borderTopWidth].map(x => parseFloat(x)))
     const scrollHeight = this.ref.scrollHeight

test/specs/addons/TextArea/TextArea-test.js

@@ -82,13 +82,7 @@ describe('TextArea', () => {
     })
 
     it('sets styles when there is a multiline value', () => {
-      wrapperMount(
-        <TextArea
-          autoHeight
-          style={style}
-          value={'line1\nline2\nline3\nline4'}
-        />,
-      )
+      wrapperMount(<TextArea autoHeight style={style} value={'line1\nline2\nline3\nline4'} />)
       assertHeight('40px') // 4 lines
     })
 
@@ -103,6 +97,18 @@ describe('TextArea', () => {
       assertHeight('40px') // 4 lines
     })
 
+    it('shrinks height when new line is deleted', () => {
+      const initialValue = 'line1\nline2\nline3\nline4'
+      wrapperMount(<TextArea autoHeight style={style} value={initialValue} />)
+
+      // initial height
+      assertHeight('40px') // 4 lines
+
+      // update the value and fire a change event
+      wrapper.setProps({ value: 'line1\nline2\nline3' })
+      assertHeight('30px') // 3 lines
+    })
+
     it('adds styles when toggled to true', () => {
       wrapperMount(<TextArea style={style} />)
       wrapper.setProps({ autoHeight: true, rows: 1 })
@@ -158,13 +164,11 @@ describe('TextArea', () => {
 
   describe('rows', () => {
     it('has default value', () => {
-      shallow(<TextArea />)
-        .should.have.prop('rows', 3)
+      shallow(<TextArea />).should.have.prop('rows', 3)
     })
 
     it('sets prop', () => {
-      shallow(<TextArea rows={1} />)
-        .should.have.prop('rows', 1)
+      shallow(<TextArea rows={1} />).should.have.prop('rows', 1)
     })
   })