[Select] disabled component looks strange

[raesche]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

In my project, the Select component shows spurious elements when its 'disabled' property is set. The problem only arises when the 'multiple' attribute is also set. The spurious elements that are visible correspond to the selected values and should be invisible.

I'm using the latest mui version (mui-material 5.9.0, emotion 11.9.3) inside an electron application (chrome browser).

This is the select with 'disabled' not set

This is the select with 'disabled' set

Expected behavior 🤔

The <Select> component should be disabled and no spurious elements should be visible. The disabled <Select> should look like this:

The screenshot above was made from an online sandbox that works as expected: https://codesandbox.io/s/selectvariants-demo-material-ui-forked-yjetry?file=/demo.js

Steps to reproduce 🕹

Steps:

1. Checkout the provided sandbox link for the "good" example
2. Suggest why this example does not work in my setup. I re-installed the mui library multiple times without solving the problem.

Context 🔦

No response

Your environment 🌎

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.14.0 - ~\.nrfconnect-apps\local\blt24-tester\node_modules\.bin\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/base:  5.0.0-alpha.89
    @mui/icons-material: 5.3.0 => 5.3.0
    @mui/material: ^5.9.0 => 5.9.0
    @mui/private-theming:  5.9.0
    @mui/styled-engine:  5.8.7
    @mui/system:  5.9.0
    @mui/types:  7.1.4
    @mui/utils:  5.9.0
    @types/react: 17.0.38 => 17.0.38
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: 4.5.4 => 4.5.4