Material-ui: Typescript List: tslint throws error message on prop component of a List

[duvet86]

After updating @types/react to 16.7.10 tslint throws the following error message:

[ts] Type '"div"' is not assignable to type '"ruby" | "small" | "sub" | "caption" | "menu" | "menuitem" | "meter" | "abbr" | "address" | "article" | "aside" | "b" | "bdi" | "bdo" | "big" | "blockquote" | "cite" | "code" | "data" | ... 41 more ... | undefined'. [2322]

When defining the prop component="div" in a List component.

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

Expected Behavior 🤔

tslint shouldn't throw any error message.

Current Behavior 😯

tslint throws an error message.

Steps to Reproduce 🕹

Create a simple project, add tslint, add @types/[email protected]

<List component="div">
      <ListItem button>
        <ListItemText primary="Inbox" />
      </ListItem>
 </List>

I tried to created a code sandbox but without linting I can't reproduce the issue.
https://codesandbox.io/s/1z819vwp64

Investigation

I have investigate the issue and this is the types definition of the List component:

export interface ListProps
  extends StandardProps<React.HTMLAttributes<HTMLUListElement>, ListClassKey> {
  component?: React.ReactType<ListProps>;
  dense?: boolean;
  disablePadding?: boolean;
  subheader?: React.ReactElement<any>;
}

React.ReactType; -> StandardProps -> HTMLUListElement

HTMLUListElement is the issue. A div element cannot get the props of a UL list element.
Should it be React.HTMLAttributes<HTMLElement>?

| Tech | Version |
|--------------|---------|
"@material-ui/core": "^3.6.0",
"@material-ui/icons": "^3.0.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"tslint": "^5.11.0",
"typescript": "^3.2.1",
"@types/react": "^16.7.10",

[eps1lon]

Possible duplicate of #13744

[eps1lon]

We currently only type the default case. If our props were generic we could accommodate for that.

Your fix would resolve your particular issue. However this would mean that you could spread ul html attributes to a div and it seems like that at some point those DOM nodes don't have the same interface.

Very unfortunate at the moment but even if we make the typings more generic by widening them to HTMLElement users that want to render a more specific component will still encounter issues.

So just like in #13744 we are stuck with the following defeat device for this particular issue:
<List component={'div' as 'ul'} />

[eps1lon]

Closed in #15292.