diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json
index 2ed4d05fa466ac..a1834c31c072d3 100644
--- a/docs/pages/material-ui/api/autocomplete.json
+++ b/docs/pages/material-ui/api/autocomplete.json
@@ -212,7 +212,7 @@
"slots": {
"type": {
"name": "shape",
- "description": "{ listbox?: elementType, paper?: elementType, popper?: elementType }"
+ "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType }"
},
"default": "{}"
},
@@ -231,6 +231,18 @@
"import { Autocomplete } from '@mui/material';"
],
"slots": [
+ {
+ "name": "clearIndicator",
+ "description": "The component used to render the clear indicator element.",
+ "default": "IconButton",
+ "class": "MuiAutocomplete-clearIndicator"
+ },
+ {
+ "name": "popupIndicator",
+ "description": "The component used to render the popup indicator element.",
+ "default": "IconButton",
+ "class": "MuiAutocomplete-popupIndicator"
+ },
{
"name": "listbox",
"description": "The component used to render the listbox.",
@@ -251,12 +263,6 @@
}
],
"classes": [
- {
- "key": "clearIndicator",
- "className": "MuiAutocomplete-clearIndicator",
- "description": "Styles applied to the clear indicator.",
- "isGlobal": false
- },
{
"key": "endAdornment",
"className": "MuiAutocomplete-endAdornment",
@@ -353,12 +359,6 @@
"description": "Styles applied to the popper element if `disablePortal={true}`.",
"isGlobal": false
},
- {
- "key": "popupIndicator",
- "className": "MuiAutocomplete-popupIndicator",
- "description": "Styles applied to the popup indicator.",
- "isGlobal": false
- },
{
"key": "popupIndicatorOpen",
"className": "MuiAutocomplete-popupIndicatorOpen",
diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json
index e7a33cf97ac42d..190b47c18055fb 100644
--- a/docs/translations/api-docs/autocomplete/autocomplete.json
+++ b/docs/translations/api-docs/autocomplete/autocomplete.json
@@ -253,10 +253,6 @@
}
},
"classDescriptions": {
- "clearIndicator": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the clear indicator"
- },
"endAdornment": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the endAdornment element"
@@ -318,10 +314,6 @@
"nodeName": "the popper element",
"conditions": "disablePortal={true}"
},
- "popupIndicator": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the popup indicator"
- },
"popupIndicatorOpen": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the popup indicator",
@@ -345,8 +337,10 @@
}
},
"slotDescriptions": {
+ "clearIndicator": "The component used to render the clear indicator element.",
"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."
+ "popper": "The component used to position the popup.",
+ "popupIndicator": "The component used to render the popup indicator element."
}
}
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
index 07260b1fd87659..d9fd4b44c81ff9 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -113,6 +113,16 @@ export interface AutocompleteRenderInputParams {
export interface AutocompletePropsSizeOverrides {}
export interface AutocompleteSlots {
+ /**
+ * The component used to render the clear indicator element.
+ * @default IconButton
+ */
+ clearIndicator: React.JSXElementConstructor;
+ /**
+ * The component used to render the popup indicator element.
+ * @default IconButton
+ */
+ popupIndicator: React.JSXElementConstructor;
/**
* The component used to render the listbox.
* @default 'ul'
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 07ffc0ff2ec46f..bbfdccc3af66cc 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -576,6 +576,33 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
},
});
+ const [ClearIndicatorSlot, clearIndicatorProps] = useSlot('clearIndicator', {
+ elementType: AutocompleteClearIndicator,
+ externalForwardedProps,
+ ownerState,
+ className: classes.clearIndicator,
+ shouldForwardComponentProp: true,
+ additionalProps: {
+ ...getClearProps(),
+ 'aria-label': clearText,
+ title: clearText,
+ },
+ });
+
+ const [PopupIndicatorSlot, popupIndicatorProps] = useSlot('popupIndicator', {
+ elementType: AutocompletePopupIndicator,
+ externalForwardedProps,
+ ownerState,
+ className: classes.popupIndicator,
+ shouldForwardComponentProp: true,
+ additionalProps: {
+ ...getPopupIndicatorProps(),
+ disabled,
+ 'aria-label': popupOpen ? closeText : openText,
+ title: popupOpen ? closeText : openText,
+ },
+ });
+
let startAdornment;
const getCustomizedItemProps = (params) => ({
@@ -663,9 +690,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
);
};
- const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
- const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
-
return (
{hasClearIcon ? (
-
- {clearIcon}
-
+ {clearIcon}
) : null}
-
{hasPopupIcon ? (
-
- {popupIcon}
-
+ {popupIcon}
) : null}
),
@@ -1223,9 +1227,11 @@ Autocomplete.propTypes /* remove-proptypes */ = {
* @default {}
*/
slots: PropTypes.shape({
+ clearIndicator: PropTypes.elementType,
listbox: PropTypes.elementType,
paper: PropTypes.elementType,
popper: PropTypes.elementType,
+ popupIndicator: 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 be0494c2cd10d4..6e172adf65ee3d 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js
@@ -83,7 +83,12 @@ describe('', () => {
clearIndicator: { expectedClassName: classes.clearIndicator },
popupIndicator: { expectedClassName: classes.popupIndicator },
},
- only: ['slotPropsProp'],
+ only: [
+ 'slotsProp',
+ 'slotPropsProp',
+ 'slotPropsCallback',
+ 'slotPropsCallbackWithPropsAsOwnerState',
+ ],
}),
);