[Autocomplete] Fix popup open logic when non empty (#20732)

mui · Apr 24, 2020 · c5ec920 · c5ec920
1 parent fce0c1c
commit c5ec920
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -1119,6 +1119,50 @@ describe('<Autocomplete />', () => {
       fireEvent.click(queryByTitle('Open'));
       expect(textbox).toHaveFocus();
     });
+
+    it('should mantain list box open clicking on input when it is not empty', () => {
+      const handleChange = spy();
+      const { getByRole, getAllByRole } = render(
+        <Autocomplete
+          onHighlightChange={handleChange}
+          options={['one']}
+          renderInput={(params) => <TextField {...params} />}
+        />,
+      );
+      const combobox = getByRole('combobox');
+      const textbox = getByRole('textbox');
+
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      fireEvent.mouseDown(textbox); // Open listbox
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+      const options = getAllByRole('option');
+      fireEvent.click(options[0]);
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      fireEvent.mouseDown(textbox); // Open listbox
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+      fireEvent.mouseDown(textbox); // Remain open listbox
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+    });
+
+    it('should not toggle list box', () => {
+      const handleChange = spy();
+      const { getByRole } = render(
+        <Autocomplete
+          value="one"
+          onHighlightChange={handleChange}
+          options={['one']}
+          renderInput={(params) => <TextField {...params} />}
+        />,
+      );
+      const combobox = getByRole('combobox');
+      const textbox = getByRole('textbox');
+
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      fireEvent.mouseDown(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+      fireEvent.mouseDown(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+    });
   });
 
   describe('controlled', () => {

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -860,7 +860,7 @@ export default function useAutocomplete(props) {
   };
 
   const handleInputMouseDown = (event) => {
-    if (inputValue === '') {
+    if (inputValue === '' || !open) {
       handlePopupIndicator(event);
     }
   };