[Select] onChange fired with current value

[ksrb]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Select> onChange handler is being called when the value is not actually changed/the user has selected the same value.

Expected Behavior 🤔

<Select> onChange to only be called when the value is actually changed.

Steps to Reproduce 🕹

Fork of https://material-ui.com/components/selects/#simple-select

https://codesandbox.io/s/material-demo-b7fys

Steps:

1. Change value
2. Notice 'Called' appears in console, this is correct
3. Select same value
4. Notice 'Called' appears again the console, this is incorrect?
5. Native select available for comparison

Context 🔦

Just noticed this happening and have dealt with it by doing a simple equality check, however, for consistency it would be nice if the non-native and native select onChange behavior would be the same.

Your Environment 🌎

Using code sandbox all latest dependencies at time of writing

[oliviertassinari]

@ksrb Thanks for the report. I remember handling this problem with the Autocomplete in:

https://github.com/mui-org/material-ui/blob/5aad5f2f729066534bd9d408cc8518b51a9f0f14/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L482

I would propose the same fix for the Select component. What do you think of this patch? :)

diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index afe173849..fc559858e 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -214,7 +214,7 @@ describe('<Select />', () => {
     it('should get selected element from arguments', () => {
       const onChangeHandler = spy();
       const { getAllByRole, getByRole } = render(
-        <Select onChange={onChangeHandler} value="1">
+        <Select onChange={onChangeHandler} value="0">
           <MenuItem value="0" />
           <MenuItem value="1" />
           <MenuItem value="2" />
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 6ace9e2ba..4bc58297f 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -139,6 +139,10 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       newValue = child.props.value;
     }

+    if (value === newValue) {
+      return;
+    }
+
     setValue(newValue);

     if (onChange) {

Do you want to send a pull request?