[Autocomplete] Fix calling onChange for duplicate values (#30374)

mui · Dec 30, 2021 · dc3b696 · dc3b696
1 parent 2663458
commit dc3b696
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
@@ -570,7 +570,11 @@ export default function useAutocomplete(props) {
   };
 
   const handleValue = (event, newValue, reason, details) => {
-    if (value === newValue) {
+    if (Array.isArray(value)) {
+      if (value.length === newValue.length && value.every((val, i) => val === newValue[i])) {
+        return;
+      }
+    } else if (value === newValue) {
       return;
     }
 

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -502,6 +502,30 @@ describe('<Autocomplete />', () => {
       expect(textbox).toHaveFocus();
     });
 
+    it('should not call onChange function for duplicate values', () => {
+      const handleChange = spy();
+      const options = ['one', 'two'];
+      render(
+        <Autocomplete
+          freeSolo
+          defaultValue={options}
+          options={options}
+          onChange={handleChange}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+          multiple
+        />,
+      );
+      const textbox = screen.getByRole('textbox');
+
+      fireEvent.change(textbox, { target: { value: 'two' } });
+      fireEvent.keyDown(textbox, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(0);
+
+      fireEvent.change(textbox, { target: { value: 'three' } });
+      fireEvent.keyDown(textbox, { key: 'Enter' });
+      expect(handleChange.callCount).to.equal(1);
+    });
+
     it('has no textbox value', () => {
       render(
         <Autocomplete