From fc10ff988ffb169f4e2b12ff6910bb9376849719 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 16:42:32 +0530 Subject: [PATCH 1/9] [autocomplete] Remove deprecated props --- .../src/Autocomplete/Autocomplete.d.ts | 68 ------------------- .../src/Autocomplete/Autocomplete.js | 26 ++----- .../src/Autocomplete/Autocomplete.spec.tsx | 4 +- .../src/useAutocomplete/useAutocomplete.d.ts | 12 ---- .../src/useAutocomplete/useAutocomplete.js | 19 +----- 5 files changed, 9 insertions(+), 120 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 8e68d61da48095..a4b63ce42a9c8b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -192,11 +192,6 @@ export interface AutocompleteProps< UseAutocompleteProps, StandardProps, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps { - /** - * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ChipProps?: ChipProps | undefined; /** * Override or extend the styles applied to the component. */ @@ -220,18 +215,6 @@ export interface AutocompleteProps< * @default 'Close' */ closeText?: string | undefined; - /** - * The props used for each slot inside. - * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps?: - | { - clearIndicator?: Partial | undefined; - paper?: PaperProps | undefined; - popper?: Partial | undefined; - popupIndicator?: Partial | undefined; - } - | undefined; /** * If `true`, the component is disabled. * @default false @@ -260,22 +243,6 @@ export interface AutocompleteProps< * @default (more) => `+${more}` */ getLimitTagsText?: ((more: number) => React.ReactNode) | undefined; - /** - * The component used to render the listbox. - * @default 'ul' - * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxComponent?: React.JSXElementConstructor> | undefined; - /** - * Props applied to the Listbox element. - * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxProps?: - | (ReturnType['getListboxProps']> & { - sx?: SxProps | undefined; - ref?: React.Ref | undefined; - }) - | undefined; /** * If `true`, the component is in a loading state. * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). @@ -314,18 +281,6 @@ export interface AutocompleteProps< * @default 'Open' */ openText?: string | undefined; - /** - * The component used to render the body of the popup. - * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PaperComponent?: React.JSXElementConstructor> | undefined; - /** - * The component used to position the popup. - * @default Popper - * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PopperComponent?: React.JSXElementConstructor | undefined; /** * The icon to display in place of the default popup icon. * @default @@ -380,29 +335,6 @@ export interface AutocompleteProps< >, ) => React.ReactNode) | undefined; - /** - * Render the selected value when doing multiple selections. - * - * @deprecated Use `renderValue` prop instead - * - * @param {Value[]} value The `value` provided to the component. - * @param {function} getTagProps A tag props getter. - * @param {object} ownerState The state of the Autocomplete component. - * @returns {ReactNode} - */ - renderTags?: - | (( - value: Value[], - getTagProps: AutocompleteRenderGetTagProps, - ownerState: AutocompleteOwnerState< - Value, - Multiple, - DisableClearable, - FreeSolo, - ChipComponent - >, - ) => React.ReactNode) - | undefined; /** * Renders the selected value(s) as rich content in the input for both single and multiple selections. * diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 8b33987e37ce91..691593eb6b92c5 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -420,14 +420,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { autoHighlight = false, autoSelect = false, blurOnSelect = false, - ChipProps: ChipPropsProp, className, clearIcon = , clearOnBlur = !props.freeSolo, clearOnEscape = false, clearText = 'Clear', closeText = 'Close', - componentsProps, defaultValue = props.multiple ? [] : null, disableClearable = false, disableCloseOnSelect = false, @@ -451,8 +449,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { includeInputInList = false, inputValue: inputValueProp, limitTags = -1, - ListboxComponent: ListboxComponentProp, - ListboxProps: ListboxPropsProp, loading = false, loadingText = 'Loading…', multiple = false, @@ -466,14 +462,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { openOnFocus = false, openText = 'Open', options, - PaperComponent: PaperComponentProp, - PopperComponent: PopperComponentProp, popupIcon = , readOnly = false, renderGroup: renderGroupProp, renderInput, renderOption: renderOptionProp, - renderTags, renderValue, selectOnFocus = !props.freeSolo, size = 'medium', @@ -533,17 +526,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const classes = useUtilityClasses(ownerState); const externalForwardedProps = { - slots: { - paper: PaperComponentProp, - popper: PopperComponentProp, - ...slots, - }, - slotProps: { - chip: ChipPropsProp, - listbox: ListboxPropsProp, - ...componentsProps, - ...slotProps, - }, + slots, + slotProps }; const [ListboxSlot, listboxProps] = useSlot('listbox', { @@ -586,9 +570,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { if (multiple) { if (value.length > 0) { - if (renderTags) { - startAdornment = renderTags(value, getCustomizedItemProps, ownerState); - } else if (renderValue) { + if (renderValue) { startAdornment = renderValue(value, getCustomizedItemProps, ownerState); } else { startAdornment = value.map((option, index) => { @@ -752,7 +734,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ) : null} {groupedOptions.length > 0 ? ( - + {groupedOptions.map((option, index) => { if (groupBy) { return renderGroup({ diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx index 9b03c023e5f64c..6d78f8cb926106 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx +++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx @@ -32,7 +32,7 @@ function MyAutocomplete< // Test for ChipComponent generic type options={['1', '2', '3']} - renderTags={(value, getTagProps, ownerState) => { + renderValue={(value, getItemProps, ownerState) => { expectType, typeof ownerState>( ownerState, ); @@ -63,7 +63,7 @@ function MyAutocomplete< // Tests presence of sx prop in ListboxProps null} />; diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts index 48eb5e2f551cb5..31020a545e6b5f 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts @@ -437,12 +437,6 @@ export interface UseAutocompleteReturnValue< * @returns props that should be spread on the popup icon */ getPopupIndicatorProps: () => React.HTMLAttributes; - /** - * @deprecated Use `getItemProps` instead - * - * A tag props getter. - */ - getTagProps: AutocompleteGetTagProps; /** * Resolver for the listbox component's props. * @returns props that should be spread on the listbox component @@ -497,12 +491,6 @@ export interface UseAutocompleteReturnValue< * Index of the focused item for the component. */ focusedItem: number; - /** - * @deprecated Use `focusedItem` instead - * - * Index of the focused tag for the component. - */ - focusedTag: number; /** * The options to render. * - If `groupBy` is provided, the options are grouped and represented as `AutocompleteGroupedOption[]`. diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index fa84999d133428..4ec2888b98e935 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -268,9 +268,7 @@ function useAutocomplete(props) { if (itemToFocus === -1) { inputRef.current.focus(); } else { - // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone. - const indexType = renderValue ? 'data-item-index' : 'data-tag-index'; - anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus(); + anchorEl.querySelector(`['data-item-index'="${itemToFocus}"]`).focus(); } }); @@ -724,9 +722,7 @@ function useAutocomplete(props) { return -1; } - // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed. - const indexType = renderValue ? 'data-item-index' : 'data-tag-index'; - const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`); + const option = anchorEl.querySelector(`['data-item-index'="${nextFocus}"]`); // Same logic as MenuList.js if ( @@ -1217,7 +1213,7 @@ function useAutocomplete(props) { }), getItemProps: ({ index = 0 } = {}) => ({ ...(multiple && { key: index }), - ...(renderValue ? { 'data-item-index': index } : { 'data-tag-index': index }), + 'data-item-index': index, tabIndex: -1, ...(!readOnly && { onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete }), }), @@ -1226,13 +1222,6 @@ function useAutocomplete(props) { type: 'button', onClick: handlePopupIndicator, }), - // deprecated - getTagProps: ({ index }) => ({ - key: index, - 'data-tag-index': index, - tabIndex: -1, - ...(!readOnly && { onDelete: handleItemDelete(index) }), - }), getListboxProps: () => ({ role: 'listbox', id: `${id}-listbox`, @@ -1273,8 +1262,6 @@ function useAutocomplete(props) { anchorEl, setAnchorEl, focusedItem, - // deprecated - focusedTag: focusedItem, groupedOptions, }; } From 4b14e949bfa56791b347af760d226e32875bf0fa Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 16:50:31 +0530 Subject: [PATCH 2/9] update proptypes and api docs --- docs/pages/material-ui/api/autocomplete.json | 45 ---------------- .../api-docs/autocomplete/autocomplete.json | 22 -------- .../src/Autocomplete/Autocomplete.js | 51 +------------------ 3 files changed, 1 insertion(+), 117 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index da3cbf36390693..94f0489df9b14f 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -16,25 +16,12 @@ }, "default": "false" }, - "ChipProps": { - "type": { "name": "object" }, - "deprecated": true, - "deprecationInfo": "Use slotProps.chip instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clearIcon": { "type": { "name": "node" }, "default": "" }, "clearOnBlur": { "type": { "name": "bool" }, "default": "!props.freeSolo" }, "clearOnEscape": { "type": { "name": "bool" }, "default": "false" }, "clearText": { "type": { "name": "string" }, "default": "'Clear'" }, "closeText": { "type": { "name": "string" }, "default": "'Close'" }, - "componentsProps": { - "type": { - "name": "shape", - "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }" - }, - "deprecated": true, - "deprecationInfo": "Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "defaultValue": { "type": { "name": "custom", "description": "any" }, "default": "props.multiple ? [] : null" @@ -97,17 +84,6 @@ } }, "limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" }, - "ListboxComponent": { - "type": { "name": "elementType" }, - "default": "'ul'", - "deprecated": true, - "deprecationInfo": "Use slotProps.listbox.component instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "ListboxProps": { - "type": { "name": "object" }, - "deprecated": true, - "deprecationInfo": "Use slotProps.listbox instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "loading": { "type": { "name": "bool" }, "default": "false" }, "loadingText": { "type": { "name": "node" }, "default": "'Loading…'" }, "multiple": { "type": { "name": "bool" }, "default": "false" }, @@ -150,18 +126,6 @@ "open": { "type": { "name": "bool" } }, "openOnFocus": { "type": { "name": "bool" }, "default": "false" }, "openText": { "type": { "name": "string" }, "default": "'Open'" }, - "PaperComponent": { - "type": { "name": "elementType" }, - "default": "Paper", - "deprecated": true, - "deprecationInfo": "Use slots.paper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "PopperComponent": { - "type": { "name": "elementType" }, - "default": "Popper", - "deprecated": true, - "deprecationInfo": "Use slots.popper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "renderGroup": { @@ -178,15 +142,6 @@ "describedArgs": ["props", "option", "state", "ownerState"] } }, - "renderTags": { - "type": { "name": "func" }, - "deprecated": true, - "deprecationInfo": "Use renderValue prop instead", - "signature": { - "type": "function(value: Array, getTagProps: function, ownerState: object) => ReactNode", - "describedArgs": ["value", "getTagProps", "ownerState"] - } - }, "renderValue": { "type": { "name": "func" }, "signature": { diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index e7a33cf97ac42d..f22baa157893eb 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -13,9 +13,6 @@ "blurOnSelect": { "description": "

Control if the input should be blurred when an option is selected:

\n
    \n
  • false the input is not blurred.
    • \n
  • true the input is always blurred.
    • \n
  • touch the input is blurred after a touch event.
    • \n
  • mouse the input is blurred after a mouse event.
    • \n
\n" }, - "ChipProps": { - "description": "Props applied to the Chip element." - }, "classes": { "description": "Override or extend the styles applied to the component." }, "clearIcon": { "description": "The icon to display in place of the default clear icon." }, "clearOnBlur": { @@ -30,7 +27,6 @@ "closeText": { "description": "Override the default text for the close popup icon button.
For localization purposes, you can use the provided translations." }, - "componentsProps": { "description": "The props used for each slot inside." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -117,8 +113,6 @@ "limitTags": { "description": "The maximum number of tags that will be visible when not focused. Set -1 to disable the limit." }, - "ListboxComponent": { "description": "The component used to render the listbox." }, - "ListboxProps": { "description": "Props applied to the Listbox element." }, "loading": { "description": "If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, for example options are empty)." }, @@ -186,8 +180,6 @@ "description": "Override the default text for the open popup icon button.
For localization purposes, you can use the provided translations." }, "options": { "description": "A list of options that will be shown in the Autocomplete." }, - "PaperComponent": { "description": "The component used to render the body of the popup." }, - "PopperComponent": { "description": "The component used to position the popup." }, "popupIcon": { "description": "The icon to display in place of the default popup icon." }, "readOnly": { "description": "If true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted." @@ -211,20 +203,6 @@ } } }, - "renderTags": { - "description": "Render the selected value when doing multiple selections.", - "typeDescriptions": { - "value": { - "name": "value", - "description": "The value provided to the component." - }, - "getTagProps": { "name": "getTagProps", "description": "A tag props getter." }, - "ownerState": { - "name": "ownerState", - "description": "The state of the Autocomplete component." - } - } - }, "renderValue": { "description": "Renders the selected value(s) as rich content in the input for both single and multiple selections.", "typeDescriptions": { diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 691593eb6b92c5..1431e6f99e2c77 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -527,7 +527,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const externalForwardedProps = { slots, - slotProps + slotProps, }; const [ListboxSlot, listboxProps] = useSlot('listbox', { @@ -793,11 +793,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default false */ blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]), - /** - * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ChipProps: PropTypes.object, /** * Override or extend the styles applied to the component. */ @@ -838,16 +833,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default 'Close' */ closeText: PropTypes.string, - /** - * The props used for each slot inside. - * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps: PropTypes.shape({ - clearIndicator: PropTypes.object, - paper: PropTypes.object, - popper: PropTypes.object, - popupIndicator: PropTypes.object, - }), /** * The default value. Use when the component is not controlled. * @default props.multiple ? [] : null @@ -1001,17 +986,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default -1 */ limitTags: integerPropType, - /** - * The component used to render the listbox. - * @default 'ul' - * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxComponent: PropTypes.elementType, - /** - * Props applied to the Listbox element. - * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxProps: PropTypes.object, /** * If `true`, the component is in a loading state. * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). @@ -1101,18 +1075,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * A list of options that will be shown in the Autocomplete. */ options: PropTypes.array.isRequired, - /** - * The component used to render the body of the popup. - * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PaperComponent: PropTypes.elementType, - /** - * The component used to position the popup. - * @default Popper - * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PopperComponent: PropTypes.elementType, /** * The icon to display in place of the default popup icon. * @default @@ -1154,17 +1116,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @returns {ReactNode} */ renderOption: PropTypes.func, - /** - * Render the selected value when doing multiple selections. - * - * @deprecated Use `renderValue` prop instead - * - * @param {Value[]} value The `value` provided to the component. - * @param {function} getTagProps A tag props getter. - * @param {object} ownerState The state of the Autocomplete component. - * @returns {ReactNode} - */ - renderTags: PropTypes.func, /** * Renders the selected value(s) as rich content in the input for both single and multiple selections. * From 5b1a73fe9376acbdd7a55cf0cb87a4b5d8adc61d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 16:59:19 +0530 Subject: [PATCH 3/9] fix tests --- .../src/Autocomplete/Autocomplete.test.js | 95 ++----------------- 1 file changed, 9 insertions(+), 86 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index e9a7f0dc7cf7fd..eb635481153f63 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -18,8 +18,6 @@ import Autocomplete, { autocompleteClasses as classes, createFilterOptions, } from '@mui/material/Autocomplete'; -import { paperClasses } from '@mui/material/Paper'; -import { iconButtonClasses } from '@mui/material/IconButton'; import InputAdornment from '@mui/material/InputAdornment'; import Tooltip from '@mui/material/Tooltip'; import describeConformance from '../../test/describeConformance'; @@ -316,10 +314,12 @@ describe('', () => { open options={['one', 'two', 'three', 'four', 'five']} renderInput={(params) => } - ListboxProps={{ style: { padding: 0, maxHeight: '100px' } }} - PopperComponent={(props) => { - const { disablePortal, anchorEl, open, ...other } = props; - return ; + slotProps={{ listbox: { style: { padding: 0, maxHeight: '100px' } } }} + slots={{ + popper: (props) => { + const { disablePortal, anchorEl, open, ...other } = props; + return ; + }, }} />, ); @@ -3261,91 +3261,14 @@ describe('', () => { expect(handleSubmit.callCount).to.equal(1); }); - describe('prop: componentsProps', () => { - it('should apply the props on the AutocompleteClearIndicator component', () => { - render( - } - componentsProps={{ - clearIndicator: { - 'data-testid': 'clearIndicator', - size: 'large', - className: 'my-class', - }, - }} - />, - ); - - const clearIndicator = screen.getByTestId('clearIndicator'); - expect(clearIndicator).to.have.class(iconButtonClasses.sizeLarge); - expect(clearIndicator).to.have.class('my-class'); - }); - - it('should apply the props on the Paper component', () => { - render( - } - componentsProps={{ - paper: { 'data-testid': 'paperRoot', elevation: 2, className: 'my-class' }, - }} - />, - ); - - const paperRoot = screen.getByTestId('paperRoot'); - expect(paperRoot).to.have.class(paperClasses.elevation2); - expect(paperRoot).to.have.class('my-class'); - }); - - it('should apply the props on the Popper component', () => { - render( - } - componentsProps={{ - popper: { 'data-testid': 'popperRoot', placement: 'bottom-end', className: 'my-class' }, - }} - />, - ); - - const popperRoot = screen.getByTestId('popperRoot'); - expect(popperRoot).to.have.attribute('data-popper-placement', 'bottom-end'); - expect(popperRoot).to.have.class('my-class'); - }); - - it('should apply the props on the AutocompletePopupIndicator component', () => { - render( - } - componentsProps={{ - popupIndicator: { - 'data-testid': 'popupIndicator', - size: 'large', - className: 'my-class', - }, - }} - />, - ); - - const popupIndicator = screen.getByTestId('popupIndicator'); - expect(popupIndicator).to.have.class(iconButtonClasses.sizeLarge); - expect(popupIndicator).to.have.class('my-class'); - }); - + describe('prop: slotProps', () => { it('should keep AutocompletePopper mounted if keepMounted is true in popper props', () => { // Autocomplete is not opened render( } - componentsProps={{ + slotProps={{ popper: { 'data-testid': 'popperRoot', keepMounted: true }, }} />, @@ -3624,7 +3547,7 @@ describe('', () => { open options={getOptions(5)} renderInput={(params) => } - ListboxProps={{ style: { maxHeight: '100px' } }} + slotProps={{ listbox: { style: { maxHeight: '100px' } } }} />, ); const listbox = screen.getByRole('listbox'); From 8507226eb371f89e439b1a117185ea549e4d9a38 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 17:04:28 +0530 Subject: [PATCH 4/9] fix types --- packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx | 4 ++-- test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx index 6d78f8cb926106..ad1f8e54cd2699 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx +++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx @@ -149,7 +149,7 @@ function AutocompleteComponentsProps() { } - componentsProps={{ + slotProps={{ clearIndicator: { size: 'large' }, paper: { elevation: 2 }, popper: { placement: 'bottom-end' }, @@ -165,7 +165,7 @@ function CustomListboxRef() { } options={['one', 'two', 'three']} - ListboxProps={{ ref }} + slotProps={{ listbox: { ref } }} /> ); } diff --git a/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx b/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx index 49cbe3f63cc603..776ed8abb820bf 100644 --- a/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx +++ b/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx @@ -8,7 +8,7 @@ function HoverMaterialAutocomplete() { open options={['one', 'two', 'three', 'four', 'five']} sx={{ width: 300 }} - ListboxProps={{ sx: { height: '100px' } }} + slotProps={{ listbox: { sx: { height: '100px' } } }} renderInput={(params) => } /> ); From 24ae653a8b40b6a19d539b9a0ec5a8eab4952aa3 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 17:10:36 +0530 Subject: [PATCH 5/9] fix string --- packages/mui-material/src/useAutocomplete/useAutocomplete.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 4ec2888b98e935..37b213b33115f8 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -268,7 +268,7 @@ function useAutocomplete(props) { if (itemToFocus === -1) { inputRef.current.focus(); } else { - anchorEl.querySelector(`['data-item-index'="${itemToFocus}"]`).focus(); + anchorEl.querySelector(`["data-item-index"="${itemToFocus}"]`).focus(); } }); @@ -722,7 +722,7 @@ function useAutocomplete(props) { return -1; } - const option = anchorEl.querySelector(`['data-item-index'="${nextFocus}"]`); + const option = anchorEl.querySelector(`["data-item-index"="${nextFocus}"]`); // Same logic as MenuList.js if ( From 564c19b9c06d96489610ba5ceb31e89d7e478a01 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 26 Feb 2026 17:48:06 +0530 Subject: [PATCH 6/9] fix querySelector --- packages/mui-material/src/useAutocomplete/useAutocomplete.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 37b213b33115f8..b1b70e6e3d96f0 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -268,7 +268,7 @@ function useAutocomplete(props) { if (itemToFocus === -1) { inputRef.current.focus(); } else { - anchorEl.querySelector(`["data-item-index"="${itemToFocus}"]`).focus(); + anchorEl.querySelector(`[data-item-index="${itemToFocus}"]`).focus(); } }); @@ -722,7 +722,7 @@ function useAutocomplete(props) { return -1; } - const option = anchorEl.querySelector(`["data-item-index"="${nextFocus}"]`); + const option = anchorEl.querySelector(`[data-item-index="${nextFocus}"]`); // Same logic as MenuList.js if ( From 070a186e0beeaf524c0901fb19a76b3e19f2d0e6 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Fri, 27 Feb 2026 15:24:03 +0530 Subject: [PATCH 7/9] Add docs --- .../migration/upgrade-to-v9/upgrade-to-v9.md | 177 ++++++++++++++++++ 1 file changed, 177 insertions(+) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index ff682210c48a3a..bca08b19af947b 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -147,3 +147,180 @@ If you were using `MuiTouchRipple` in your theme, remove it and use global CSS w ### JSDOM support v9 removes all usage of `process.env.NODE_ENV === 'test'`. The `NODE_ENV` variable will exclusively be used for for tree-shaking. Our libraries have been updated to auto-detect DOM environments that don't support layout such as [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) through user agent sniffing. + +### Deprecated APIs removed + +APIs that were deprecated earlier have been removed in v9. + +#### Autocomplete deprecated props removed + +The following deprecated props have been removed from the `Autocomplete` component: + +* `ChipProps` → use `slotProps.chip` +* `componentsProps` → use `slotProps` +* `ListboxComponent` → use `slots.listbox` +* `ListboxProps` → use `slotProps.listbox` +* `PaperComponent` → use `slots.paper` +* `PopperComponent` → use `slots.popper` +* `renderTags` → use `renderValue` + +##### ChipProps prop + +The deprecated `ChipProps` prop has been removed. Use `slotProps.chip` instead. + +```diff + +``` + +##### componentsProps prop + +The deprecated `componentsProps` prop has been removed. Use `slotProps` instead. + +```diff + } +- componentsProps={{ +- clearIndicator: { size: 'large' }, +- paper: { elevation: 2 }, +- popper: { placement: 'bottom-end' }, +- popupIndicator: { size: 'large' }, +- }} ++ slotProps={{ ++ clearIndicator: { size: 'large' }, ++ paper: { elevation: 2 }, ++ popper: { placement: 'bottom-end' }, ++ popupIndicator: { size: 'large' }, ++ }} + /> +``` + +##### ListboxComponent and ListboxProps props + +The deprecated `ListboxComponent` and `ListboxProps` props have been removed. + +Use `slots.listbox` instead of `ListboxComponent`: + +```diff + } +- ListboxComponent={CustomListbox} ++ slots={{ listbox: CustomListbox }} + /> +``` + +Use `slotProps.listbox` instead of `ListboxProps`: + +```diff + } +- ListboxProps={{ style: { maxHeight: 200 } }} ++ slotProps={{ listbox: { style: { maxHeight: 200 } } }} + /> +``` + +If you were passing a `ref` via `ListboxProps`, move it to `slotProps.listbox.ref`: + +```diff + } +- ListboxProps={{ ref }} ++ slotProps={{ listbox: { ref } }} + /> +``` + +##### PaperComponent and PopperComponent props + +The deprecated `PaperComponent` and `PopperComponent` props have been removed. Use `slots.paper` and `slots.popper` instead. + +```diff + } +- PaperComponent={CustomPaper} +- PopperComponent={CustomPopper} ++ slots={{ ++ paper: CustomPaper, ++ popper: CustomPopper, ++ }} + /> +``` + +If you were providing an inline component: + +```diff + } +- PopperComponent={(props) => { +- const { disablePortal, anchorEl, open, ...other } = props; +- return ; +- }} ++ slots={{ ++ popper: (props) => { ++ const { disablePortal, anchorEl, open, ...other } = props; ++ return ; ++ }, ++ }} + /> +``` + +##### renderTags prop + +The deprecated `renderTags` prop has been removed. Use `renderValue` instead. + +```diff + +- value.map((option, index) => ( +- +- )) +- } ++ renderValue={(value, getItemProps, ownerState) => ++ value.map((option, index) => ( ++ ++ )) ++ } + /> +``` + +--- + +#### useAutocomplete deprecated fields removed + +The following deprecated members have been removed from the `useAutocomplete` hook return value: + +* `getTagProps` → use `getItemProps` +* `focusedTag` → use `focusedItem` + +##### getTagProps + +```diff + const { +- getTagProps, ++ getItemProps, + } = useAutocomplete(props); + + // ... +- ++ +``` + +##### focusedTag + +```diff + const { +- focusedTag, ++ focusedItem, + } = useAutocomplete(props); +``` From d9948e738c3c4f23cc39e5341f6155bdfb4cb808 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Fri, 27 Feb 2026 15:25:00 +0530 Subject: [PATCH 8/9] pnpm prettier --- .../migration/upgrade-to-v9/upgrade-to-v9.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index bca08b19af947b..346d67ca90b684 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -156,13 +156,13 @@ APIs that were deprecated earlier have been removed in v9. The following deprecated props have been removed from the `Autocomplete` component: -* `ChipProps` → use `slotProps.chip` -* `componentsProps` → use `slotProps` -* `ListboxComponent` → use `slots.listbox` -* `ListboxProps` → use `slotProps.listbox` -* `PaperComponent` → use `slots.paper` -* `PopperComponent` → use `slots.popper` -* `renderTags` → use `renderValue` +- `ChipProps` → use `slotProps.chip` +- `componentsProps` → use `slotProps` +- `ListboxComponent` → use `slots.listbox` +- `ListboxProps` → use `slotProps.listbox` +- `PaperComponent` → use `slots.paper` +- `PopperComponent` → use `slots.popper` +- `renderTags` → use `renderValue` ##### ChipProps prop @@ -300,8 +300,8 @@ The deprecated `renderTags` prop has been removed. Use `renderValue` instead. The following deprecated members have been removed from the `useAutocomplete` hook return value: -* `getTagProps` → use `getItemProps` -* `focusedTag` → use `focusedItem` +- `getTagProps` → use `getItemProps` +- `focusedTag` → use `focusedItem` ##### getTagProps From 661232ab05df568354e10b1ab1a3ba1ff9275f1d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Fri, 13 Mar 2026 12:33:09 +0530 Subject: [PATCH 9/9] Add codemod in migration docs --- .../migration/upgrade-to-v9/upgrade-to-v9.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 79a539dd5b0cb5..12d9e9777fd347 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -233,6 +233,12 @@ APIs that were deprecated earlier have been removed in v9. #### Autocomplete deprecated props removed +Use the [autocomplete-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#autocomplete-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/autocomplete-props +``` + The following deprecated props have been removed from the `Autocomplete` component: - `ChipProps` → use `slotProps.chip` @@ -377,6 +383,12 @@ The deprecated `renderTags` prop has been removed. Use `renderValue` instead. #### useAutocomplete deprecated fields removed +Use the [autocomplete-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#autocomplete-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/autocomplete-props +``` + The following deprecated members have been removed from the `useAutocomplete` hook return value: - `getTagProps` → use `getItemProps`