search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.52k stars 32.19k forks source link

[Select] disabled component looks strange #33523

Open raesche opened 2 years ago

raesche commented 2 years ago

Duplicates

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 Not disabled

This is the select with 'disabled' set Disabled

Expected behavior 🤔

The should look like this:
Disabled_OK

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
haneenmahd commented 2 years ago

I couldn't reproduce it on the sandbox you shared 👎🏻 !

PunitSoniME commented 2 years ago

@raesche Forked your codesandbox and tried with disabled

You added screenshot which has multiple props true, and you shared the codesandbox link with single selection.

Please atleast share the codesandbox with same scenario which you want to explain.

However I tried and issue is not reproduced - Codesandbox

hbjORbj commented 2 years ago

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

github-actions[bot] commented 2 years ago

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

raesche commented 2 years ago

I was unable to reproduce this issue on any sandbox, that's why I could not provide a sandbox link with the problem. However the problem still exists in my project (it's an electron application) and I was not able to resolve it (even when copying the sample code from the MUI website and updating to the latest version).

In the meantime I discovered that the spurious element is the label that is somehow not properly hidden. My workaround inside my React component looks as follows:

const inputRef = useRef();
useEffect(() => {
        if (inputRef.current) {
            const inputElement = [...inputRef.current.children].find(node => node.nodeName === "INPUT");
            if (inputElement)
                inputElement.style.display = "none";
        }
    }, [inputRef]);

...

<Select
  ref={inputRef}
....
>
haneenmahd commented 2 years ago

Why don't you ignore setting the display style of the input and instead show the input element when needed using conditional rendering.

Example:

const [someState, setState] = useState(false);

return (
  <div>
    {someState && <input />}
  </div>
);

If you need some help with your project, email me! I will help you figure out what the problem is.

raesche commented 1 year ago

Dear Haneen Thanks, but the issue is not related to a single \ that needs to be visible or hidden. The problematic \ is part of the \ within the \