Controlled Checkbox and Switch do not set the checked property on the underlying input component correctly.

[JPTeasdale]

• 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 😯

When rendering a controlledCheckbox or Switch component like so:

<FormControlLabel control={<Checkbox checked={isChecked} />} label={"test label"} />

The underlying input component will the same value for checked regardless of isChecked is true or not.

Expected Behavior 🤔

These components:

<FormControlLabel control={<Checkbox checked={true} />} label={"test label"} />
<FormControlLabel control={<Checkbox checked={false} />} label={"test label"} />

Should respectively have these underlying input components:

<input class="MuiSwitch-input PrivateSwitchBase-input" type="checkbox" value="" checked>
<input class="MuiSwitch-input PrivateSwitchBase-input" type="checkbox" value="">

Note that this is also the case for Switch

Steps to Reproduce 🕹

https://codesandbox.io/s/nifty-snyder-pdwsx

Steps:

1. Click the checkbox. Note the checked value doesn't change while the inputProps attributes do.

Context 🔦

This makes running expect(screen.getByLabelText("test label")).toBeChecked() impossible, which goes against the material-ui testing recommendations: https://next.material-ui.com/guides/testing/#userspace

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.4
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/codemod:  5.0.0-beta.4 
    @material-ui/core:  5.0.0-beta.5 
    @material-ui/data-grid:  4.0.0-alpha.32 
    @material-ui/docs:  5.0.0-beta.5 
    @material-ui/envinfo:  1.1.6 
    @material-ui/icons:  5.0.0-beta.5 
    @material-ui/lab:  5.0.0-alpha.44 
    @material-ui/markdown:  5.0.0 
    @material-ui/private-theming:  5.0.0-beta.5 
    @material-ui/styled-engine:  5.0.0-beta.5 
    @material-ui/styled-engine-sc:  5.0.0-beta.5 
    @material-ui/styles:  5.0.0-beta.5 
    @material-ui/system:  5.0.0-beta.5 
    @material-ui/types:  6.0.2 
    @material-ui/unstyled:  5.0.0-alpha.44 
    @material-ui/utils:  5.0.0-beta.5 
    @types/react: ^17.0.19 => 17.0.15 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components:  5.3.0 
    typescript: ^4.1.2 => 4.2.4 

[michaldudak]

Hi, this is how React handles it. If you used a plain <input type="checkbox" />, the behavior would be the same. The checked property (what the browser sees in the DOM) gets updated, but the attribute (what you see in the source) does not. It's been reported as an issue in the React repo.

In general, you should not rely on attributes. DOM properties are the source of truth. See https://codesandbox.io/s/agitated-payne-ifx6i?file=/src/Demo.tsx - the property is updated correctly. For testing, you can also use the property directly: expect(screen.getByLabelText("test label").checked).to.equal(true).