[material-ui][FormControl] Typescript error: Cannot access e.target.checked

[marcellino-ornelas]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-lt4tqf?file=Demo.tsx%3AL184

Current behavior

No response

Expected behavior

No response

Context

Im trying to figure out how to type FormControlLabel.onChange so we can access e.target.checked?

using React.SyntheticEvent<HTMLInputElement> doesnt let us access .checked

and when I change it to React.ChangeEvent<HTMLInputElement> it works but then I get a different type error when passing the function to FormControlLabel.onChange

I could pass this to Switch.onChange but in my actual code, Im passing name="<some-name>" to the FormControlLabel which lets me access e.target.name in the event handler so I can reuse state logic.

Your environment

npx @mui/envinfo

These might not be the latest but using latest in stackblitz
https://stackblitz.com/edit/react-lt4tqf?file=Demo.tsx,node_modules%2F%40mui%2Fmaterial%2FFormControlLabel%2FFormControlLabel.d.ts

  Browser: Chrome
  System:
    OS: Linux 6.5 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 20.5.1 - /usr/local/bin/node
    npm: 10.5.1 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.36 
    @mui/core-downloads-tracker:  5.15.14 
    @mui/icons-material: ^5.14.0 => 5.15.10 
    @mui/joy: ^5.0.0-alpha.87 => 5.0.0-beta.28 
    @mui/lab: 5.0.0-alpha.136 => 5.0.0-alpha.136 
    @mui/material: ^5.14.0 => 5.15.14 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.14 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid: ^7.1.0 => 7.1.0 
    @mui/x-date-pickers: ^6.10.0 => 6.19.4 
    @types/react: 18.2.15 => 18.2.15 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components: ^6.0.4 => 6.1.8 
    typescript: 5.1.6 => 5.1.6

Search keywords: e.target.checked

[ZeeshanTamboli]

You can utilize the checked state provided in the second parameter of the onChange callback. Check out the updated StackBlitz: https://stackblitz.com/edit/react-lt4tqf-iywzq3?file=Demo.tsx%3AL184.

Actually, I see that it should be removed in v6 and event.target.checked should be used: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/internal/SwitchBase.js#L116-L119. This will require update in onChange callback type definition as well. CC @DiegoAndai so that it can be tracked.

[DiegoAndai]

Thanks for the callout @ZeeshanTamboli. I created an issue to track this: #41925