Repository: mui/material-ui (TypeScript) — Bug Fix

Issue:
onChange behavior has changed between core@v4.5.1 and core@4.5.2
As discussed with @oliviertassinari the InputBase elements onChange behavior has changed.

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

The second param to a custom inputComponent is not passed back in the onChange callback.

## Expected Behavior 🤔

Any number of arguments sent to original onChange of custom inputComponent should be passed onto the onChange callback

## Steps to Reproduce 🕹

[Link to sample example](https://codesandbox.io/s/create-react-app-dnwfh)

If you are on core lib. version: 4.5.1 the onChange handler for custom inputComponent is giving correct values.

If you are on core lib. version: 4.5.2(latest) the onChange handler for parent onchange is giving correct values.

## Context 🔦
The issue was first noticed with an integration with React-select library which uses a custom onchange event signature and passes value as 1st param and meta data of event in 2nd param.

## Your Environment 🌎

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.5.2  |
| React       |    Latest     |
| Browser     |   Chrome      |
| TypeScript  |    x     |



Discussion:

Resolving patch:
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -328,7 +328,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     }
 
     if (inputPropsProp.onChange) {
-      inputPropsProp.onChange(event);
+      inputPropsProp.onChange(event, ...args);
     }
 
     // Perform in the willUpdate


Test patch:
diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js
--- 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(