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

…ui#44857)
DiegoAndai · Dec 25, 2024 · dd0bb69 · dd0bb69
1 parent e52a637
commit dd0bb69
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 87 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -617,76 +617,6 @@ 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 (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
@@ -751,7 +681,70 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           },
         })}
       </AutocompleteRoot>
-      {anchorEl ? autocompletePopper : null}
+      {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}
     </React.Fragment>
   );
 });

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