[Chip] `disableRipple` causes TypeScript error "No overload matches this call."

[jfeigel]

• 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:

1. Use TypeScript and Material-UI
2. Add the disableRipple prop 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"
    }
}

[enricopolanski]

disableRipple isn't part of the Chip API afaik:

https://material-ui.com/api/chip/

[oliviertassinari]

@enricopolanski Is right, the prop is only available in some use cases. You can dodge the issue with:

import React from "react";
import { Chip } from "@material-ui/core";

export default function Demo() {
  const more = { disableRipple: true };
  return <Chip label="Material Chip" onClick={() => {}} {...more} />;
}

https://codesandbox.io/s/naughty-visvesvaraya-i9c59?file=/src/Demo.tsx

[tomhalley]

@enricopolanski @oliviertassinari If it isn't part of the API, how are we meant to disable the ripple effect on the chip? The solution above still spits out warnings which in turn make Jest fail

  console.error
    Warning: React does not recognize the `disableRipple` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableripple` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[iryan2]

Any update on this?