[Select] Style is broken when adding a className in the SelectDisplayProps

[Newpoki]

Adding a className in the SelectDisplayProps actually overides its existing classNames

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have a component. When I want to give a className to the div that display the selected value of the Select, instead of adding the className to the others like every material ui component, it overrides them. I have a <Select /> component, when I add a className in SelectDisplayProps, it overirdes the existing classNames of the component that display the selected value in the .

Expected Behavior 🤔

It should not overrides the existing classNames but be added to them.

Steps to Reproduce 🕹

Here you can find a sandbox to see the bug: https://codesandbox.io/s/material-ui-issue-forked-oi0vd

Steps:

1. You're on the sandbox. There is actually an object in the SelectDisplayProps:

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

2. When clicking on the Button under the input, it will change the SelectDisplayProps to undefined, as if you didn't specified one.
3. You can see by inspecting the DOM that when there is no SelectDisplayProps, there is the material UI default class. But when the SelectDisplayProps is specified, the className disappear

Context 🔦

I want to overrides the style of the element that display the select value. The problem exist even if i totally change the style i'm trying to give, so I don't think it's related.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	16.13.1
Browser	Chrome - Version 86.0.4240.75 (Official Build) (64-bit)
TypeScript	3.9.5

[oliviertassinari]

@Newpoki Thanks for the report, I can confirm the issue. What do you think about this fix?

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index eb58ecd1b3..2098d0f3b8 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -353,16 +353,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   return (
     <React.Fragment>
       <div
-        className={clsx(
-          classes.root, // TODO v5: merge root and select
-          classes.select,
-          classes.selectMenu,
-          classes[variant],
-          {
-            [classes.disabled]: disabled,
-          },
-          className,
-        )}
         ref={setDisplayNode}
         tabIndex={tabIndex}
         role="button"
@@ -376,6 +366,17 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         onBlur={handleBlur}
         onFocus={onFocus}
         {...SelectDisplayProps}
+        className={clsx(
+          classes.root, // TODO v5: merge root and select
+          classes.select,
+          classes.selectMenu,
+          classes[variant],
+          {
+            [classes.disabled]: disabled,
+          },
+          className,
+          SelectDisplayProps.className
+        )}
         // The id is required for proper a11y
         id={buttonId}
       >

Do you want to work on a pull-request? :)

[reedanders]

I'd like to give it a try. Can you assign it to me?

[Newpoki]

Hello,
Sorry for the late reply, I was at my job 😅

Glad It was a real issue and not from my mind, and that it's gonna be fixed :D

Thanks @reedanders for the PR.