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) => (
+
+
+ {children}
+
+
+ );
+
+ let autocompletePopper = null;
+ if (!loading && groupedOptions.length > 0) {
+ autocompletePopper = renderAutocompletePopperChildren(
+
+ {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);
+ })}
+ ,
+ );
+ } else if (loading && groupedOptions.length === 0) {
+ autocompletePopper = renderAutocompletePopperChildren(
+
+ {loadingText}
+ ,
+ );
+ } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+ autocompletePopper = renderAutocompletePopperChildren(
+ {
+ // Prevent input blur when interacting with the "no options" content
+ event.preventDefault();
+ }}
+ >
+ {noOptionsText}
+ ,
+ );
+ }
+
return (
- {anchorEl ? (
-
-
- {loading && groupedOptions.length === 0 ? (
-
- {loadingText}
-
- ) : null}
- {groupedOptions.length === 0 && !freeSolo && !loading ? (
- {
- // Prevent input blur when interacting with the "no options" content
- event.preventDefault();
- }}
- >
- {noOptionsText}
-
- ) : null}
- {groupedOptions.length > 0 ? (
-
- {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);
- })}
-
- ) : null}
-
-
- ) : null}
+ {anchorEl ? autocompletePopper : null}
);
});
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('', () => {
expect(container.querySelector(`.${classes.endAdornment}`)).to.equal(null);
});
+
+ it('should not render popper when there are no options', () => {
+ render(
+ }
+ slotProps={{
+ popper: { 'data-testid': 'popperRoot' },
+ }}
+ />,
+ );
+ const popper = screen.queryByTestId('popperRoot');
+ expect(popper).to.equal(null);
+ });
});
describe('prop: onChange', () => {