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.82k stars 32.26k forks source link

[Collapse] Trying to use props like `id` on <Collapse> leads to a type error in TypeScript #29883

Closed dantman closed 2 years ago

dantman commented 2 years ago

Duplicates

Latest version

Current behavior 😯

When you try to use basic DOM props like id on <Collapse> in TypeScript you get a type error because they are not included in CollapseProps.

Expected behavior 🤔

It should be possible to use dom props, especially id, on Collapse without a TypeScript type error.

Steps to reproduce 🕹

Steps:

  1. Use TypeScript
  2. Add an id="something" to a <Collapse> component

https://codesandbox.io/s/infallible-ptolemy-u6bye?file=/src/Demo.tsx

Context 🔦

ARIA has an example on how to make stuff like Collapse accessible (Using a button to collapse and expand a region).

You can make this accessible this in JS using MUI using Collapse. However if you try it in TypeScript you cannot make your Collapse accessible because you get a type error on the necessary id.

Your environment 🌎

`npx @mui/envinfo` ``` System: OS: Linux 5.10 Ubuntu 20.10 (Groovy Gorilla) Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.11 - ~/.nvm/versions/node/v16.13.0/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.4.0 => 11.6.0 @emotion/styled: ^11.3.0 => 11.6.0 @mui/base: 5.0.0-alpha.56 @mui/icons-material: ^5.0.0 => 5.2.0 @mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.56 @mui/material: ^5.0.0 => 5.2.0 @mui/private-theming: 5.2.0 @mui/styled-engine: 5.2.0 @mui/styles: ^5.0.0 => 5.2.0 @mui/system: 5.2.0 @mui/types: 7.1.0 @mui/utils: ^5.0.0 => 5.2.0 @types/react: ^17.0.15 => 17.0.35 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: 5.3.3 typescript: 4.2.4 => 4.2.4 ```
Janpot commented 2 years ago

Thank you for bringing this to our attention. I've added a fix in https://github.com/mui-org/material-ui/pull/29888