also fix NativeSelect

mui · Apr 18, 2021 · b1af7ab · b1af7ab
1 parent dc3594f
commit b1af7ab
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import NativeSelectInput from './NativeSelectInput';
 import formControlState from '../FormControl/formControlState';
@@ -14,6 +15,7 @@ const defaultInput = <Input />;
 const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
   const props = useThemeProps({ name: 'MuiNativeSelect', props: inProps });
   const {
+    className,
     children,
     classes,
     IconComponent = ArrowDropDownIcon,
@@ -45,6 +47,7 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
     },
     ref,
     ...other,
+    className: clsx(className, input.props.className),
   });
 });
 
@@ -62,6 +65,10 @@ NativeSelect.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon

diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme, ThemeProvider, experimentalStyled } from '@material-ui/core/styles';
 import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import NativeSelect, { nativeSelectClasses as classes } from '@material-ui/core/NativeSelect';
 import Input, { inputClasses } from '@material-ui/core/Input';
@@ -92,4 +92,17 @@ describe('<NativeSelect />', () => {
 
     expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle);
   });
+
+  it('styled NativeSelect with custom input should not overwritten className', () => {
+    const StyledSelect = experimentalStyled(NativeSelect)();
+    const { getByTestId } = render(
+      <StyledSelect
+        className="foo"
+        input={<Input data-testid="root" className="bar" />}
+        value=""
+      />,
+    );
+    expect(getByTestId('root')).to.have.class('foo');
+    expect(getByTestId('root')).to.have.class('bar');
+  });
 });