[material-ui][Autocomplete] Display options provided to the options…

… prop even if loading is true. (#41677)
mui · Apr 4, 2024 · 42afab7 · 42afab7
1 parent 4170412
commit 42afab7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -630,7 +630,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   );
 
   let autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren(
       <AutocompleteListbox
         as={ListboxComponent}

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -145,6 +145,23 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
       expect(document.querySelector(`.${classes.paper}`).textContent).to.equal('Loading…');
     });
+
+    it('should show supplied options to the "options" prop even when loading', () => {
+      render(
+        <Autocomplete
+          options={['one', 'two']}
+          loading
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
+      expect(document.querySelector(`.${classes.paper}`).textContent).not.to.equal('Loading…');
+
+      const listbox = screen.getByRole('listbox');
+      const htmlOptions = listbox.querySelectorAll('li');
+      expect(htmlOptions[0].innerHTML).to.equal('one');
+    });
   });
 
   describe('prop: autoHighlight', () => {