textarea

Author: Sasha Kondrashov

src/addons/TextArea/TextArea.d.ts

@@ -13,17 +13,27 @@ export interface StrictTextAreaProps {
    * Called on change.
    *
    * @param {SyntheticEvent} event - The React SyntheticEvent object
-   * @param {object} data - All props and the event value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the textarea.
    */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => void
+  onChange?: (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+    props: TextAreaProps,
+    value: string,
+  ) => void
 
   /**
    * Called on input.
    *
    * @param {SyntheticEvent} event - The React SyntheticEvent object
-   * @param {object} data - All props and the event value.
+   * @param {object} props - All props.
+   * @param {string} value - The value of the textarea.
    */
-  onInput?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaProps) => void
+  onInput?: (
+    event: React.FormEvent<HTMLTextAreaElement>,
+    props: TextAreaProps,
+    value: string,
+  ) => void
 
   /** Indicates row count for a TextArea. */
   rows?: number | string

src/addons/TextArea/TextArea.js

@@ -15,13 +15,13 @@ const TextArea = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    _.invoke(props, 'onChange', e, props, newValue)
   }
 
   const handleInput = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onInput', e, { ...props, value: newValue })
+    _.invoke(props, 'onInput', e, props, newValue)
   }
 
   const rest = getUnhandledProps(TextArea, props)

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

@@ -50,7 +50,7 @@ describe('TextArea', () => {
   })
 
   describe('onChange', () => {
-    it('is called with (e, data) on change', () => {
+    it('is called with (e, props, value) on change', () => {
       const onChange = sandbox.spy()
       const e = { target: { value: 'name' } }
       const props = { 'data-foo': 'bar', onChange }
@@ -59,12 +59,12 @@ describe('TextArea', () => {
       wrapper.find('textarea').simulate('change', e)
 
       onChange.should.have.been.calledOnce()
-      onChange.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onChange.should.have.been.calledWithMatch(e, props, e.target.value)
     })
   })
 
   describe('onInput', () => {
-    it('is called with (e, data) on input', () => {
+    it('is called with (e, props, value) on input', () => {
       const onInput = sandbox.spy()
       const e = { target: { value: 'name' } }
       const props = { 'data-foo': 'bar', onInput }
@@ -73,7 +73,7 @@ describe('TextArea', () => {
       wrapper.find('textarea').simulate('input', e)
 
       onInput.should.have.been.calledOnce()
-      onInput.should.have.been.calledWithMatch(e, { ...props, value: e.target.value })
+      onInput.should.have.been.calledWithMatch(e, props, e.target.value)
     })
   })