-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
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 😯
Wrapping the Tabs component results in TypeScript emitting the wrong types for the onChange prop:
Type '(event: ChangeEvent<{}>, value: number) => void' is not assignable to type '((event: ChangeEvent<{}>, value: any) => void) & ((event: FormEvent<HTMLButtonElement>) => void)'.
Type '(event: ChangeEvent<{}>, value: number) => void' is not assignable to type '(event: FormEvent<HTMLButtonElement>) => void'.ts(2322)The same problem looks to be appearing for action. It appears to be intersecting the types from ButtonBases props. Maybe a union type was intended?
(((instance: TabsActions | null) => void) & ((instance: ButtonBaseActions | null) => void)) | (((instance: TabsActions | null) => void) & React.RefObject<ButtonBaseActions>) | (React.RefObject<...> & ((instance: ButtonBaseActions | null) => void)) | (React.RefObject<...> & React.RefObject<...>) | null | undefinedExpected Behavior 🤔
The type of TabsProps.onChange should be ((event: React.ChangeEvent<{}>, value: any) => void) | undefined. I believe this regression may have been caused by #16487.
Steps to Reproduce 🕹
See https://codesandbox.io/s/upbeat-grass-gc0i9 for the TypeScript error and example wrapping of Tabs component.
Context 🔦
It's quite common for us to wrap up the MUI components with our own customizations and export them as common components to use throughout our applications. In this case after upgrading MUI's minor version recently this started causing TypeScript errors everywhere we've used Tabs.
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.4.2 |
| React | v16.9.0 |
| Browser | |
| TypeScript | v3.6.3 |
| etc. |