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('); + 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',