[native select] Remove the unused iconOpen class

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",

docs/translations/api-docs/native-select/native-select.json

@@ -47,11 +47,6 @@
       "nodeName": "the icon component",
       "conditions": "<code>variant=\"filled\"</code>"
     },
-    "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",

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)}`]];
   },
 })({});
 

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',

packages/mui-material/src/Select/Select.test.js

@@ -2774,6 +2774,13 @@ describe('<Select />', () => {
     });
   });
 
+  it('should rotate the icon when open', () => {
+    const { container } = render(<Select open value="" />);
+    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) {

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',