[Select] property 'SelectDisplayProps' type is too restrictive: should allow data-* attributes

[teetotum]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I'm on version 5.5.1 (according to my package-lock.json)

TypeScript will complain when I try to set data-testid via SelectDisplayProps.
Currently I need to silence TypeScript; either like this:

<Select
    SelectDisplayProps={{ ['data-testid']: 'my-id' } as any}
/>

or like in the first example of this issue

<Select
    SelectDisplayProps={{
        // @ts-ignore
        "data-testid": "demo-simple-select-helper-data-testid"
    }}
/>

Expected behavior 🤔

It should be possible to set any data-* attributes without getting a TypeScript error

<Select
    SelectDisplayProps={{ ['data-testid']: 'my-id' }}
/>

Steps to reproduce 🕹

No response

Context 🔦

No response

Your environment 🌎

No response

[ZeeshanTamboli]

There is similar issue like this in #18874. It's a limitation of TypeScript. Upvote microsoft/TypeScript#28960 to get this issue fixed.

You can also extend the SelectDisplayProps as shown in StackOverflow example.

[teetotum]

But shouldn't the SelectDisplayProps type rather be defined to be a combination of React.HTMLAttributes<HTMLDivElement> with some HTMLDataAttributes type in the material-ui d.ts file? So to allow those attributes?
Like this:

type DataAttributeKey = `data-${string}`;
type HTMLDataAttributes = Record<DataAttributeKey, string>;

SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement> & HTMLDataAttributes;

[ZeeshanTamboli]

But shouldn't the SelectDisplayProps type rather be defined to be a combination of React.HTMLAttributes<HTMLDivElement> with some HTMLDataAttributes type in the material-ui d.ts file? So to allow those attributes? Like this:

type DataAttributeKey = `data-${string}`;
type HTMLDataAttributes = Record<DataAttributeKey, string>;

SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement> & HTMLDataAttributes;

@teetotum It's a good proposal👍. But template literal types — data-${string} — are available since TypeScript v4.4 and the minimum version of TypeScript that MUI requires is 3.5 (docs). It may throw an error for users who use TypeScript version less than 4.4 with MUI.

I'll add "waiting for upvotes" label.