Material-ui: [Select] Style is broken when adding a className in the SelectDisplayProps

Created on 21 Oct 2020 · 3Comments · Source: mui-org/material-ui

Adding a className in the SelectDisplayProps actually overides its existing classNames

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

Current Behavior 😯

I have a .

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:

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

SelectDisplayProps={{
    className: classes.selectDisplay
  }}

When clicking on the Button under the input, it will change the SelectDisplayProps to undefined, as if you didn't specified one.
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 |

bug 🐛 Select good first issue

Source

Newpoki

All 3 comments

@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? :)