[Autocomplete] Fix clearOnBlur prop (#29208)

mui · Oct 26, 2021 · b6cdaaf · b6cdaaf
1 parent 913e7c1
commit b6cdaaf
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/packages/mui-core/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-core/src/AutocompleteUnstyled/useAutocomplete.js
@@ -152,6 +152,12 @@ export default function useAutocomplete(props) {
 
   const resetInputValue = React.useCallback(
     (event, newValue) => {
+      // retain current `inputValue` if new option isn't selected and `clearOnBlur` is false
+      // When `multiple` is enabled, `newValue` is an array of all selected items including the newly selected item
+      const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;
+      if (!isOptionSelected && !clearOnBlur) {
+        return;
+      }
       let newInputValue;
       if (multiple) {
         newInputValue = '';
@@ -172,7 +178,7 @@ export default function useAutocomplete(props) {
         onInputChange(event, newInputValue, 'reset');
       }
     },
-    [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState],
+    [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value],
   );
 
   const prevValue = React.useRef();

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -850,6 +850,61 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  describe('prop: clearOnBlur', () => {
+    it('should clear on blur', () => {
+      render(
+        <Autocomplete
+          clearOnBlur
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+      const textbox = screen.getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: 'test' } });
+      expect(document.activeElement.value).to.equal('test');
+      act(() => {
+        textbox.blur();
+      });
+      expect(textbox.value).to.equal('');
+    });
+
+    it('should not clear on blur', () => {
+      render(
+        <Autocomplete
+          clearOnBlur={false}
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+      const textbox = screen.getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: 'test' } });
+      expect(document.activeElement.value).to.equal('test');
+      act(() => {
+        textbox.blur();
+      });
+      expect(textbox.value).to.equal('test');
+    });
+
+    it('should not clear on blur with `multiple` enabled', () => {
+      render(
+        <Autocomplete
+          multiple
+          clearOnBlur={false}
+          options={['one', 'two']}
+          defaultValue={['one']}
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+      const textbox = screen.getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: 'test' } });
+      expect(document.activeElement.value).to.equal('test');
+      act(() => {
+        textbox.blur();
+      });
+      expect(textbox.value).to.equal('test');
+    });
+  });
+
   describe('when popup open', () => {
     it('closes the popup if Escape is pressed ', () => {
       const handleClose = spy();