[chip] `disableRipple` causes TypeScript error "No overload matches this call."
Open
Nobody has claimed this yet.
scope: chip
type: bug
typescript
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- 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 😯
disableRipple works as expected, however a TypeScript error is thrown.
TypeScript error
No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any>; } & { avatar?:
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... |
(new (props: any) => Component<any, any, any>)> | null) | (new (props: any)
=> Component<...>)> | undefined; ... 9 more ...; variant?: "default" | ... 1
more ... | undefined; } & CommonProps<...> & Pick<...>): Element', gave the
following error.
Property 'component' is missing in type '{ label: string; onClick: () =>
void; disableRipple: true; }' but required in type '{ component:
ElementType<any>; }'.
Overload 2 of 2, '(props: DefaultComponentProps<ChipTypeMap<{}, "div">>):
Element', gave the following error.
Type '{ label: string; onClick: () => void; disableRipple: true; }' is not
assignable to type 'IntrinsicAttributes & { avatar?: ReactElement<any,
string | ((props: any) => ReactElement<any, string | ... | (new (props:
any) => Component<any, any, any>)> | null) | (new (props: any) =>
Component<...>)> | undefined; ... 9 more ...; variant?: "default" | ... 1
more ... | undefined; } & CommonProps<...> & Pick<...>'.
Property 'disableRipple' does not exist on type 'IntrinsicAttributes & {
avatar?: ReactElement<any, string | ((props: any) => ReactElement<any,
string | ... | (new (props: any) => Component<any, any, any>)> | null)
| (new (props: any) => Component<...>)> | undefined; ... 9 more ...;
variant?: "default" | ... 1 more ... | undefined; } & CommonProps<...>
& Pick<...>'.ts(2769)
OverridableComponent.d.ts(17, 7): 'component' is declared here.
Expected Behavior 🤔
No TypeScript error should be thrown.
Steps to Reproduce 🕹
Steps:
- Use TypeScript and Material-UI
- Add the
disableRippleprop to a Chip.
https://codesandbox.io/s/divine-star-nimfs?file=/src/Demo.tsx
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.11.0 and v5.0.0-alpha12 |
| React | v16.13.1 |
| TypeScript | 3.9.7 |
tsconfig.json
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"lib": [
"dom",
"es2015"
],
"jsx": "react"
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the error in the linked CodeSandbox, starting with src/Demo.tsx and the Chip usage shown in the issue. Inspect OverridableComponent.d.ts at line 17 and the related Chip type declarations, then verify that a Chip with disableRipple compiles without a TypeScript error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100