fix(TextArea): use onInput for updating height for IE compatibility (#…

…1982)

* fix(TextArea): use onInput for updating height for IE compatibility

* fix(TextArea): cleanup onChange and onInput typings

* fix(typings): remove useless export

index.d.ts

@@ -3,7 +3,7 @@ export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
 export { default as Select, SelectProps } from './dist/commonjs/addons/Select';
-export { default as TextArea, TextAreaProps, TextAreaOnChangeData } from './dist/commonjs/addons/TextArea';
+export { default as TextArea, TextAreaProps } from './dist/commonjs/addons/TextArea';
 
 // Behaviors
 export {

src/addons/TextArea/TextArea.d.ts

@@ -15,7 +15,15 @@ export interface TextAreaProps {
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
-  onChange?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaOnChangeData) => void;
+  onChange?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaProps) => void;
+
+  /**
+   * Called on input.
+   *
+   * @param {SyntheticEvent} event - The React SyntheticEvent object
+   * @param {object} data - All props and the event value.
+   */
+  onInput?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaProps) => void;
 
   /** Indicates row count for a TextArea. */
   rows?: number | string;
@@ -27,10 +35,6 @@ export interface TextAreaProps {
   value?: number | string;
 }
 
-export interface TextAreaOnChangeData extends TextAreaProps {
-  value?: string;
-}
-
 declare class TextArea extends React.Component<TextAreaProps, {}> {
   focus: () => void;
 }

src/addons/TextArea/TextArea.js

@@ -33,6 +33,13 @@ class TextArea extends Component {
      */
     onChange: PropTypes.func,
 
+    /**
+     * Called on input.
+     * @param {SyntheticEvent} event - The React SyntheticEvent object
+     * @param {object} data - All props and the event value.
+     */
+    onInput: PropTypes.func,
+
     /** Indicates row count for a TextArea. */
     rows: PropTypes.oneOfType([
       PropTypes.number,
@@ -75,6 +82,12 @@ class TextArea extends Component {
     const value = _.get(e, 'target.value')
 
     _.invoke(this.props, 'onChange', e, { ...this.props, value })
+  }
+
+  handleInput = (e) => {
+    const value = _.get(e, 'target.value')
+
+    _.invoke(this.props, 'onInput', e, { ...this.props, value })
     this.updateHeight()
   }
 
@@ -116,6 +129,7 @@ class TextArea extends Component {
       <ElementType
         {...rest}
         onChange={this.handleChange}
+        onInput={this.handleInput}
         ref={this.handleRef}
         rows={rows}
         style={{ resize, ...style }}

src/addons/TextArea/index.d.ts

@@ -1 +1 @@
-export { default, TextAreaProps, TextAreaOnChangeData } from './TextArea';
+export { default, TextAreaProps } from './TextArea';

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

@@ -142,6 +142,20 @@ describe('TextArea', () => {
     })
   })
 
+  describe('onInput', () => {
+    it('is called with (e, data) on input', () => {
+      const spy = sandbox.spy()
+      const e = { target: { value: 'name' } }
+      const props = { 'data-foo': 'bar', onInput: spy }
+
+      wrapperShallow(<TextArea {...props} />)
+      wrapper.find('textarea').simulate('input', e)
+
+      spy.should.have.been.calledOnce()
+      spy.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+    })
+  })
+
   describe('rows', () => {
     it('has default value', () => {
       shallow(<TextArea />)