[InputBase] Fix onChange event handler callback of inputProps (#18131)

mui · Nov 1, 2019 · b3f8731 · b3f8731
1 parent 6610686
commit b3f8731
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
@@ -332,7 +332,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
 
     if (inputPropsProp.onChange) {
-      inputPropsProp.onChange(event);
+      inputPropsProp.onChange(event, ...args);
     }
 
     // Perform in the willUpdate

diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js
@@ -558,6 +558,43 @@ describe('<InputBase />', () => {
     });
   });
 
+  describe('prop: inputComponent with prop: inputProps', () => {
+    it('should call onChange inputProp callback with all params sent from custom inputComponent', () => {
+      const INPUT_VALUE = 'material';
+      const OUTPUT_VALUE = 'test';
+
+      function MyInputBase(props) {
+        const { inputRef, onChange, ...other } = props;
+
+        const handleChange = e => {
+          onChange(e.target.value, OUTPUT_VALUE);
+        };
+
+        return <input ref={inputRef} onChange={handleChange} {...other} />;
+      }
+
+      MyInputBase.propTypes = {
+        inputRef: PropTypes.func.isRequired,
+        onChange: PropTypes.func.isRequired,
+      };
+
+      let outputArguments;
+      function parentHandleChange(...args) {
+        outputArguments = args;
+      }
+
+      const { getByRole } = render(
+        <InputBase inputComponent={MyInputBase} inputProps={{ onChange: parentHandleChange }} />,
+      );
+      const textbox = getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: INPUT_VALUE } });
+
+      expect(outputArguments.length).to.equal(2);
+      expect(outputArguments[0]).to.equal(INPUT_VALUE);
+      expect(outputArguments[1]).to.equal(OUTPUT_VALUE);
+    });
+  });
+
   describe('prop: startAdornment, prop: endAdornment', () => {
     it('should render adornment before input', () => {
       const { getByTestId } = render(