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(