diff --git a/docs/pages/material-ui/api/native-select.json b/docs/pages/material-ui/api/native-select.json
index 6caa6f0108b414..9c24bd97be36a6 100644
--- a/docs/pages/material-ui/api/native-select.json
+++ b/docs/pages/material-ui/api/native-select.json
@@ -67,12 +67,6 @@
"description": "Styles applied to the icon component if `variant=\"filled\"`.",
"isGlobal": false
},
- {
- "key": "iconOpen",
- "className": "MuiNativeSelect-iconOpen",
- "description": "Styles applied to the icon component if the popup is open.",
- "isGlobal": false
- },
{
"key": "iconOutlined",
"className": "MuiNativeSelect-iconOutlined",
diff --git a/docs/translations/api-docs/native-select/native-select.json b/docs/translations/api-docs/native-select/native-select.json
index 99344b7d720f13..2ade4be463446f 100644
--- a/docs/translations/api-docs/native-select/native-select.json
+++ b/docs/translations/api-docs/native-select/native-select.json
@@ -47,11 +47,6 @@
"nodeName": "the icon component",
"conditions": "variant=\"filled\""
},
- "iconOpen": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the icon component",
- "conditions": "the popup is open"
- },
"iconOutlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon component",
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index c7b420d7c03cff..e150553a7d171c 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -12,11 +12,11 @@ import rootShouldForwardProp from '../styles/rootShouldForwardProp';
import inputAdornmentClasses from '../InputAdornment/inputAdornmentClasses';
const useUtilityClasses = (ownerState) => {
- const { classes, variant, disabled, multiple, open, error } = ownerState;
+ const { classes, variant, disabled, multiple, error } = ownerState;
const slots = {
select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
- icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
+ icon: ['icon', `icon${capitalize(variant)}`, disabled && 'disabled'],
};
return composeClasses(slots, getNativeSelectUtilityClasses, classes);
@@ -146,12 +146,6 @@ export const StyledSelectIcon = styled('svg', {
color: (theme.vars || theme).palette.action.disabled,
},
variants: [
- {
- props: ({ ownerState }) => ownerState.open,
- style: {
- transform: 'rotate(180deg)',
- },
- },
{
props: {
variant: 'filled',
@@ -176,11 +170,7 @@ const NativeSelectIcon = styled(StyledSelectIcon, {
slot: 'Icon',
overridesResolver: (props, styles) => {
const { ownerState } = props;
- return [
- styles.icon,
- ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`],
- ownerState.open && styles.iconOpen,
- ];
+ return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`]];
},
})({});
diff --git a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
index 8301846b3c6a87..80316d7fd6d25a 100644
--- a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
+++ b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
@@ -18,8 +18,6 @@ export interface NativeSelectClasses {
disabled: string;
/** Styles applied to the icon component. */
icon: string;
- /** Styles applied to the icon component if the popup is open. */
- iconOpen: string;
/** Styles applied to the icon component if `variant="filled"`. */
iconFilled: string;
/** Styles applied to the icon component if `variant="outlined"`. */
@@ -47,7 +45,6 @@ const nativeSelectClasses: NativeSelectClasses = generateUtilityClasses('MuiNati
'standard',
'disabled',
'icon',
- 'iconOpen',
'iconFilled',
'iconOutlined',
'iconStandard',
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index de50eb1454d97c..3f00a1fd016584 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -2774,6 +2774,13 @@ describe('', () => {
});
});
+ it('should rotate the icon when open', () => {
+ const { container } = render();
+ const icon = container.querySelector(`.${classes.icon}`);
+ expect(icon).to.have.class(classes.iconOpen);
+ expect(icon).not.toHaveComputedStyle({ transform: 'none' });
+ });
+
describe('prop: input', () => {
it('merges `ref` of `Select` and `input`', () => {
const Input = React.forwardRef(function Input(props, ref) {
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 806baf3def7faa..7c2027f0dac1bf 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -103,7 +103,16 @@ const SelectIcon = styled(StyledSelectIcon, {
const { ownerState } = props;
return [styles.icon, ownerState.open && styles.iconOpen];
},
-})({});
+})({
+ variants: [
+ {
+ props: ({ ownerState }) => ownerState.open,
+ style: {
+ transform: 'rotate(180deg)',
+ },
+ },
+ ],
+});
const SelectNativeInput = styled('input', {
shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'classes',