xxxProps type error with data-* attribute

[oscar-b]

• 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 specifying PaperProps there's a type error.

Expected Behavior 🤔

There should be no type error.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-h11wl
demo.tsx, row 55:

PaperProps={{ 'data-testid': '123' }}

Steps:

1. Add the following the a Popover:

PaperProps={{ 'data-testid': '123' }}

Error:

Object literal may only specify known properties, and ''data-testid'' does not exist in type 'Partial'.ts(2769)

Context 🔦

Cypress needs selectors for targeting elements, and using a data-id or data-testid attribute is the preferred solution that doesn't rely on styling selectors which might change over time.

Your Environment 🌎

Tech	Version
Material-UI	v4.8.0
React	v16.12.0
Browser
TypeScript	v3.7.3
etc.

[oliviertassinari]

I have no idea where this error originates from. Any idea? It looks like TypeScript gives up: https://codesandbox.io/s/material-demo-h11wl.

[oscar-b]

I have no idea where this error originates from. Any idea? It looks like TypeScript gives up: https://codesandbox.io/s/material-demo-h11wl.

No sorry I don't really have any idea, I'm new to using TS :| But I was assuming that data-* should be whitelisted, and as far as I can see this works (and should be using the same type):

<Paper data-testid="123">

[oscar-b]

@oliviertassinari This looks relevant: microsoft/TypeScript#28960

[oliviertassinari]

@oscar-b Oh great, so it's somewhat a limitation of TypeScript?

[oscar-b]

@oscar-b Oh great, so it's somewhat a limitation of TypeScript?

That's the way I interpret it, at least :/

[eps1lon]

Closing this in favor of microsoft/TypeScript#28960. Please upvote and subscribe to that issue instead if you'd like to see this fixed.