[Autocomplete] Fix autoSelect logic (#19384)

mui · Jan 25, 2020 · 7648a6c · 7648a6c
1 parent 4f8e820
commit 7648a6c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -29,10 +29,10 @@ describe('<Autocomplete />', () => {
 
   describe('combobox', () => {
     it('should clear the input when blur', () => {
-      const { container } = render(
+      const { getByRole } = render(
         <Autocomplete renderInput={params => <TextField {...params} />} />,
       );
-      const input = container.querySelector('input');
+      const input = getByRole('textbox');
       input.focus();
       fireEvent.change(document.activeElement, { target: { value: 'a' } });
       expect(input.value).to.equal('a');
@@ -49,12 +49,51 @@ describe('<Autocomplete />', () => {
     });
   });
 
-  describe('multiple', () => {
+  describe('prop: autoSelect', () => {
+    it('should add new value when autoSelect & multiple on blur', () => {
+      const handleChange = spy();
+      const options = ['one', 'two'];
+      render(
+        <Autocomplete
+          autoSelect
+          multiple
+          value={[options[0]]}
+          options={options}
+          onChange={handleChange}
+          renderInput={params => <TextField autoFocus {...params} />}
+        />,
+      );
+      fireEvent.change(document.activeElement, { target: { value: 't' } });
+      fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+      document.activeElement.blur();
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.deep.equal(options);
+    });
+
+    it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
+      const handleChange = spy();
+      render(
+        <Autocomplete
+          autoSelect
+          freeSolo
+          multiple
+          onChange={handleChange}
+          renderInput={params => <TextField autoFocus {...params} />}
+        />,
+      );
+      fireEvent.change(document.activeElement, { target: { value: 'a' } });
+      document.activeElement.blur();
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.deep.equal(['a']);
+    });
+  });
+
+  describe('prop: multiple', () => {
     it('should not crash', () => {
-      const { container } = render(
+      const { getByRole } = render(
         <Autocomplete renderInput={params => <TextField {...params} />} multiple />,
       );
-      const input = container.querySelector('input');
+      const input = getByRole('textbox');
       input.focus();
       document.activeElement.blur();
       input.focus();
@@ -524,14 +563,15 @@ describe('<Autocomplete />', () => {
 
     describe('prop: disabled', () => {
       it('should disable the input', () => {
-        const { container } = render(
+        const { getByRole } = render(
           <Autocomplete
             disabled
             options={['one', 'two', 'three']}
             renderInput={params => <TextField {...params} />}
           />,
         );
-        expect(container.querySelector('input').disabled).to.be.true;
+        const input = getByRole('textbox');
+        expect(input.disabled).to.be.true;
       });
 
       it('should disable the popup button', () => {
@@ -645,14 +685,14 @@ describe('<Autocomplete />', () => {
 
     it('should not select undefined ', () => {
       const handleChange = spy();
-      const { container, getByRole } = render(
+      const { getByRole } = render(
         <Autocomplete
           onChange={handleChange}
           options={['one', 'two']}
           renderInput={params => <TextField {...params} />}
         />,
       );
-      const input = container.querySelector('input');
+      const input = getByRole('textbox');
       fireEvent.click(input);
 
       const listbox = getByRole('listbox');

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -653,7 +653,9 @@ export default function useAutocomplete(props) {
     }
 
     if (autoSelect && selectedIndexRef.current !== -1) {
-      handleValue(event, filteredOptions[selectedIndexRef.current]);
+      selectNewValue(event, filteredOptions[selectedIndexRef.current]);
+    } else if (autoSelect && freeSolo && inputValue !== '') {
+      selectNewValue(event, inputValue, 'freeSolo');
     } else if (!freeSolo) {
       resetInputValue(event, value);
     }