Material-ui: ListItem doesn't accept prop htmlFor (TypeScript)

[pixelkritzel]

This is a Typescript error

The ListItem component accepts label for the prop component but doesn't accept the htmlFor prop as it should

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If I provide a value of label to the prop component of the ListItem component I should also be able to provide the prop htmlFor

So

<ListItem component="label" htmlFor="foo" />

should crate this HTML

<label for="foo />

Current Behavior

Instead I get the type error

Property 'htmlFor' does not exist on type 'IntrinsicAttributes & ListItemProps & { children?: ReactNode; }'.

Steps to Reproduce

Link: https://codesandbox.io/s/r0pr5qjnzq

Context

I try to use the label to trigger a hidden <input type="file" />

Your Environment

Link to my current package.json and the repo itself

[pixelkritzel]

My current solution is kind of weird

[oliviertassinari]

The solution to this problem is well known but not documented. @pelotom maybe we should put it into the TypeScript guide? I don't know I have seen this question multiples times here. Or maybe we should just direct people to StackOverflow.

@pixelkritzel You need to explicitly use an intermediate component. Here is how I would do it in pure JavaScript, you can add the typing after:

const Label = props => <label htmlFor="foo" {...props} />

<ListItem component={Label} />

[pixelkritzel]

Thx! OK, this is much better than my current solution.

[pelotom]

@oliviertassinari as it happens I've been working on a better solution to this problem, basically a continuation of #11731... stay tuned!

[adeelibr]

Going through the comments, the docs label was removed? Are we no longer adding this

const Label = props => <label htmlFor="foo" {...props} />
<ListItem component={Label} />

somewhere in the docs? or should we add a typing for ListItem component for prop htmlFor? @oliviertassinari

[merceyz]

@oliviertassinari This no longer produces a type error :+1:

[oliviertassinari]

Does it mean we can close it? Do we have a test for it?

[merceyz]

Yes, haven't checked for the existence of a test outside of ListItem.spec.tsx. Tested it manually and got no errors, can open a PR with a test if you want.
It was fixed in https://github.com/mui-org/material-ui/pull/13868/files#diff-a242e1d972e33ce7b57d1b3296de00aa

[oliviertassinari]

Great! In this case, option 1. We add a simple test, in case we have to refactor the logic in the future, option 2. It's a solved generic issue, we close it.

[merceyz]

Should be able to go with option 2, other components test the exact same logic

[eps1lon]

Should be able to go with option 2, other components test the exact same logic

Yep. Would need to test for every component + html attribute combination. Should™ be fine without a test.