[Autocomplete] Display loading feedback with freeSolo (#20869)

Author: Weslen Nascimento

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -54,6 +54,21 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  describe('prop: loading', () => {
+    it('should show a loading message when open', () => {
+      render(
+        <Autocomplete
+          {...defaultProps}
+          freeSolo
+          loading
+          renderInput={(params) => <TextField autoFocus {...params} />}
+        />,
+      );
+      fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+      expect(document.querySelector(`.${classes.paper}`).textContent).to.equal('Loading…');
+    });
+  });
+
   describe('prop: autoHighlight', () => {
     it('should set the focus on the first item', () => {
       const options = ['one', 'two'];

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -242,7 +242,7 @@ export default function useAutocomplete(props) {
   const inputValueIsSelectedValue =
     !multiple && value != null && inputValue === getOptionLabel(value);
 
-  let popupOpen = open;
+  const popupOpen = open;
 
   const filteredOptions = popupOpen
     ? filterOptions(
@@ -263,8 +263,6 @@ export default function useAutocomplete(props) {
       )
     : [];
 
-  popupOpen = freeSolo && filteredOptions.length === 0 ? false : popupOpen;
-
   if (process.env.NODE_ENV !== 'production') {
     if (value !== null && !freeSolo && options.length > 0) {
       const missingValue = (multiple ? value : [value]).filter(
@@ -405,7 +403,7 @@ export default function useAutocomplete(props) {
   });
 
   React.useEffect(() => {
-    if (!open) {
+    if (!popupOpen) {
       return;
     }
 
@@ -451,7 +449,7 @@ export default function useAutocomplete(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     value,
-    open,
+    popupOpen,
     filterSelectedOptions,
     changeHighlightedIndex,
     setHighlightedIndex,