From 3707598329983b4a8ee88874b3eefea1324fb88d Mon Sep 17 00:00:00 2001
From: rakeshmusturi <122796348+rakeshmusturi@users.noreply.github.com>
Date: Thu, 7 Mar 2024 15:44:58 +0530
Subject: [PATCH] [material-ui][Autocomplete] Fix the options list being added
 to the DOM in `freeSolo` mode even when there are no options, causing style
 problems  (#41300)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 .../src/Autocomplete/Autocomplete.js          | 135 +++++++++---------
 .../src/Autocomplete/Autocomplete.test.js     |  16 +++
 2 files changed, 87 insertions(+), 64 deletions(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 18e0e9d58180c1..3672e8f334d4d6 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -582,6 +582,76 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
 
+  const renderAutocompletePopperChildren = (children) => (
+    <AutocompletePopper
+      as={PopperComponent}
+      disablePortal={disablePortal}
+      style={{ width: anchorEl ? anchorEl.clientWidth : null }}
+      ownerState={ownerState}
+      role="presentation"
+      anchorEl={anchorEl}
+      open={popupOpen}
+      {...popperSlotProps}
+      className={clsx(classes.popper, popperSlotProps?.className)}
+    >
+      <AutocompletePaper
+        ownerState={ownerState}
+        as={PaperComponent}
+        {...paperSlotProps}
+        className={clsx(classes.paper, paperSlotProps?.className)}
+      >
+        {children}
+      </AutocompletePaper>
+    </AutocompletePopper>
+  );
+
+  let autocompletePopper = null;
+  if (!loading && groupedOptions.length > 0) {
+    autocompletePopper = renderAutocompletePopperChildren(
+      <AutocompleteListbox
+        as={ListboxComponent}
+        className={classes.listbox}
+        ownerState={ownerState}
+        {...otherListboxProps}
+        {...ListboxProps}
+        ref={combinedListboxRef}
+      >
+        {groupedOptions.map((option, index) => {
+          if (groupBy) {
+            return renderGroup({
+              key: option.key,
+              group: option.group,
+              children: option.options.map((option2, index2) =>
+                renderListOption(option2, option.index + index2),
+              ),
+            });
+          }
+          return renderListOption(option, index);
+        })}
+      </AutocompleteListbox>,
+    );
+  } else if (loading && groupedOptions.length === 0) {
+    autocompletePopper = renderAutocompletePopperChildren(
+      <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
+        {loadingText}
+      </AutocompleteLoading>,
+    );
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    autocompletePopper = renderAutocompletePopperChildren(
+      <AutocompleteNoOptions
+        className={classes.noOptions}
+        ownerState={ownerState}
+        role="presentation"
+        onMouseDown={(event) => {
+          // Prevent input blur when interacting with the "no options" content
+          event.preventDefault();
+        }}
+      >
+        {noOptionsText}
+      </AutocompleteNoOptions>,
+    );
+  }
+
   return (
     <React.Fragment>
       <AutocompleteRoot
@@ -646,70 +716,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? (
-        <AutocompletePopper
-          as={PopperComponent}
-          disablePortal={disablePortal}
-          style={{
-            width: anchorEl ? anchorEl.clientWidth : null,
-          }}
-          ownerState={ownerState}
-          role="presentation"
-          anchorEl={anchorEl}
-          open={popupOpen}
-          {...popperSlotProps}
-          className={clsx(classes.popper, popperSlotProps?.className)}
-        >
-          <AutocompletePaper
-            ownerState={ownerState}
-            as={PaperComponent}
-            {...paperSlotProps}
-            className={clsx(classes.paper, paperSlotProps?.className)}
-          >
-            {loading && groupedOptions.length === 0 ? (
-              <AutocompleteLoading className={classes.loading} ownerState={ownerState}>
-                {loadingText}
-              </AutocompleteLoading>
-            ) : null}
-            {groupedOptions.length === 0 && !freeSolo && !loading ? (
-              <AutocompleteNoOptions
-                className={classes.noOptions}
-                ownerState={ownerState}
-                role="presentation"
-                onMouseDown={(event) => {
-                  // Prevent input blur when interacting with the "no options" content
-                  event.preventDefault();
-                }}
-              >
-                {noOptionsText}
-              </AutocompleteNoOptions>
-            ) : null}
-            {groupedOptions.length > 0 ? (
-              <AutocompleteListbox
-                as={ListboxComponent}
-                className={classes.listbox}
-                ownerState={ownerState}
-                {...otherListboxProps}
-                {...ListboxProps}
-                ref={combinedListboxRef}
-              >
-                {groupedOptions.map((option, index) => {
-                  if (groupBy) {
-                    return renderGroup({
-                      key: option.key,
-                      group: option.group,
-                      children: option.options.map((option2, index2) =>
-                        renderListOption(option2, option.index + index2),
-                      ),
-                    });
-                  }
-                  return renderListOption(option, index);
-                })}
-              </AutocompleteListbox>
-            ) : null}
-          </AutocompletePaper>
-        </AutocompletePopper>
-      ) : null}
+      {anchorEl ? autocompletePopper : null}
     </React.Fragment>
   );
 });
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 5ae89516371bfd..c20e977925918e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -2336,6 +2336,22 @@ describe('<Autocomplete />', () => {
 
       expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
     });
+
+    it('should not render popper when there are no options', () => {
+      render(
+        <Autocomplete
+          open
+          freeSolo
+          options={[]}
+          renderInput={(params) => <TextField {...params} />}
+          slotProps={{
+            popper: { 'data-testid': 'popperRoot' },
+          }}
+        />,
+      );
+      const popper = screen.queryByTestId('popperRoot');
+      expect(popper).to.equal(null);
+    });
   });
 
   describe('prop: onChange', () => {