Tabs onChange event does not fire if tab was wrapped

[Swazimodo]

We are adding badges to tabs if there were any validation errors on that page. I created a component to handle the task but it causes the onChange event to stop firing.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would have thought wrapping the tab would have had no impact to the functionality.

Steps to Reproduce

interface IComponentProps {
    itemProp: string;
    label: string;
    badgeCount: number;

    // tslint:disable-next-line:no-any
    value: any;
}
class BadgeTab extends React.Component<IComponentProps & WithStyles<styleTypes>> {
    render() {
        const classes = this.props.classes;

        return <Tab 
            itemProp={this.props.itemProp}
            value={this.props.value}
            label={this.props.badgeCount > 0 ? <Badge
                    className={classes.badge}
                    color="error"
                    badgeContent={this.props.badgeCount}
                >
                    {this.props.label}
                </Badge> 
            : 
                this.props.label}
        />;
    }
}
export default withStyles(styles)<IComponentProps>(BadgeTab);

In order to fix this I made IComponentProps extend TabProps and then spread the props over the tab. I'm guessing the component is cloned and it is having the onClick event handler set. Seems how it was not exposed it did not work. As such this might be expected behavior but I figured I would document it.

Tech	Version
Material-UI	v^1.1.0
React	v^16.3.2
Chrome	v68.0.3440.106
TypeScript	v2.8.4

[oliviertassinari]

@Swazimodo This topic has been covered multiple times in the past, we have documented the approach under https://material-ui.com/guides/composition/#wrapping-components. In your case, you need to forward the parent properties from the Tabs to the Tab.

We are looking into a better approach in #12921.