Skip to content

[Tabs] Issues with onChange TypeScript types #17454

@ianschmitz

Description

@ianschmitz
  • 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 | undefined

Expected 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions