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', () => {