diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 75ba78c7dcb83c..f165b797e12aa1 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -544,7 +544,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const externalForwardedProps = { slots: { - listbox: ListboxComponentProp, paper: PaperComponentProp, popper: PopperComponentProp, ...slots, @@ -558,7 +557,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { }; const [ListboxSlot, listboxProps] = useSlot('listbox', { - elementType: 'ul', + elementType: AutocompleteListbox, externalForwardedProps, ownerState, className: classes.listbox, @@ -682,7 +681,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { 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 + {groupedOptions.map((option, index) => { if (groupBy) { return renderGroup({ @@ -695,7 +696,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { } return renderListOption(option, index); })} - , + , ); } else if (loading && groupedOptions.length === 0) { autocompletePopper = renderAutocompletePopperChildren( diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 11f1bda5ab9220..506e0decd989c5 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -130,6 +130,34 @@ describe('', () => { }); }); + it('should not throw error when accessing ownerState in styleOverrides', () => { + const theme = createTheme({ + components: { + MuiAutocomplete: { + styleOverrides: { + root: ({ ownerState }) => { + return { + outlineColor: ownerState.size === 'small' ? 'magenta' : 'crimson', + }; + }, + }, + }, + }, + }); + + expect(() => { + render( + + } + /> + , + ); + }).not.to.throw(); + }); + describe('combobox', () => { it('should clear the input when blur', () => { const { getByRole } = render(