[Autocomplete] Revert: Fix options list rendering in freeSolo mode (#…

…44858)
mui · Dec 25, 2024 · 6ab5bcb · 6ab5bcb
1 parent 998c9f2
commit 6ab5bcb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 67 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -671,56 +671,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
   const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
 
-  const renderAutocompletePopperChildren = (children) => (
-    <AutocompletePopper as={PopperSlot} {...popperProps}>
-      <AutocompletePaper as={PaperSlot} {...paperProps}>
-        {children}
-      </AutocompletePaper>
-    </AutocompletePopper>
-  );
-
-  let autocompletePopper = null;
-  if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(
-      // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
-      // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
-      <ListboxSlot as={ListboxComponentProp} {...listboxProps}>
-        {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);
-        })}
-      </ListboxSlot>,
-    );
-  } 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
@@ -785,7 +735,46 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? autocompletePopper : null}
+      {anchorEl ? (
+        <AutocompletePopper as={PopperSlot} {...popperProps}>
+          <AutocompletePaper as={PaperSlot} {...paperProps}>
+            {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 ? (
+              <ListboxSlot as={ListboxComponentProp} {...listboxProps}>
+                {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);
+                })}
+              </ListboxSlot>
+            ) : null}
+          </AutocompletePaper>
+        </AutocompletePopper>
+      ) : null}
     </React.Fragment>
   );
 });

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -2440,22 +2440,6 @@ 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', () => {