diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json
index a1834c31c072d3..176873d6835f46 100644
--- a/docs/pages/material-ui/api/autocomplete.json
+++ b/docs/pages/material-ui/api/autocomplete.json
@@ -205,14 +205,14 @@
"slotProps": {
"type": {
"name": "shape",
- "description": "{ chip?: func
| object, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object }"
+ "description": "{ chip?: func
| object, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object, root?: func
| object }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
- "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType }"
+ "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType, root?: elementType }"
},
"default": "{}"
},
@@ -231,6 +231,12 @@
"import { Autocomplete } from '@mui/material';"
],
"slots": [
+ {
+ "name": "root",
+ "description": "The component that renders the root.",
+ "default": "'div'",
+ "class": "MuiAutocomplete-root"
+ },
{
"name": "clearIndicator",
"description": "The component used to render the clear indicator element.",
@@ -365,12 +371,6 @@
"description": "Styles applied to the popup indicator if the popup is open.",
"isGlobal": false
},
- {
- "key": "root",
- "className": "MuiAutocomplete-root",
- "description": "Styles applied to the root element.",
- "isGlobal": false
- },
{
"key": "tag",
"className": "MuiAutocomplete-tag",
diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json
index 190b47c18055fb..4ced38894aaeac 100644
--- a/docs/translations/api-docs/autocomplete/autocomplete.json
+++ b/docs/translations/api-docs/autocomplete/autocomplete.json
@@ -319,7 +319,6 @@
"nodeName": "the popup indicator",
"conditions": "the popup is open"
},
- "root": { "description": "Styles applied to the root element." },
"tag": {
"description": "Styles applied to {{nodeName}}, {{conditions}}.",
"nodeName": "the tag elements",
@@ -341,6 +340,7 @@
"listbox": "The component used to render the listbox.",
"paper": "The component used to render the body of the popup.",
"popper": "The component used to position the popup.",
- "popupIndicator": "The component used to render the popup indicator element."
+ "popupIndicator": "The component used to render the popup indicator element.",
+ "root": "The component that renders the root."
}
}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
index d9fd4b44c81ff9..571286dfd771f7 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -113,6 +113,11 @@ export interface AutocompleteRenderInputParams {
export interface AutocompletePropsSizeOverrides {}
export interface AutocompleteSlots {
+ /**
+ * The component that renders the root.
+ * @default 'div'
+ */
+ root: React.ElementType;
/**
* The component used to render the clear indicator element.
* @default IconButton
@@ -149,6 +154,11 @@ export type AutocompleteSlotsAndSlotProps<
> = CreateSlotsAndSlotProps<
AutocompleteSlots,
{
+ root: SlotProps<
+ 'div',
+ {},
+ AutocompleteOwnerState
+ >;
chip: SlotProps<
React.ElementType>>,
{},
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index bbfdccc3af66cc..3c48a1e024ccd6 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -1,7 +1,6 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
-import clsx from 'clsx';
import integerPropType from '@mui/utils/integerPropType';
import chainPropTypes from '@mui/utils/chainPropTypes';
import composeClasses from '@mui/utils/composeClasses';
@@ -546,6 +545,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
},
};
+ const [RootSlot, rootProps] = useSlot('root', {
+ ref,
+ className: [classes.root, className],
+ elementType: AutocompleteRoot,
+ externalForwardedProps: {
+ ...externalForwardedProps,
+ ...other,
+ },
+ getSlotProps: getRootProps,
+ ownerState,
+ });
+
const [ListboxSlot, listboxProps] = useSlot('listbox', {
elementType: AutocompleteListbox,
externalForwardedProps,
@@ -692,12 +703,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
return (
-
+
{renderInput({
id,
disabled,
@@ -733,7 +739,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
...getInputProps(),
},
})}
-
+
{anchorEl ? (
@@ -1221,6 +1227,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
/**
* The components used for each slot inside.
@@ -1232,6 +1239,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
paper: PropTypes.elementType,
popper: PropTypes.elementType,
popupIndicator: PropTypes.elementType,
+ root: PropTypes.elementType,
}),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
index 0fa1eb0dfa5d4a..5cd4baf0fa8acc 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -60,6 +60,7 @@ describe('', () => {
refInstanceof: window.HTMLDivElement,
testComponentPropWith: 'div',
slots: {
+ root: { expectedClassName: classes.root },
listbox: { expectedClassName: classes.listbox },
paper: { expectedClassName: classes.paper },
popper: { expectedClassName: classes.popper, testWithElement: null },