Material-ui: [Tabs] wrapping tabs in custom function breaks onChange

[el1f]

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

Expected Behavior 🤔

When using a Tabs components with a custom child which renders a Tab component as it's only child it should work as if I'm writing the tabs as direct children of the Tabs component.

Current Behavior 😯

onChange and active don't seem to propagate to the tabs rendered by the custom component. Is this the intended behaviour? Can I pass the props to my custom component somehow?

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/l2762q1kwl

1. replace TabItem with a Tab and give it the tab prop instead of the label prop
2. tabs are now functional

Context 🔦

I'm trying to get my Tabs in wrappers to avoid repetition to the best of my ability and I'm trying to understand why this is the case with tabs

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.2 |
| React | v16.5.2 |
| Browser | chrome |

[eps1lon]

We should add this limitation to the docs. It's the same issue that's causing troubles with wrapped Tooltips around Tabs.

Basically a Tab has to be the immediate child of Tabs right now. Otherwise certain features cannot function properly.

A workaround for now is to use a render function instead of a component.

[oliviertassinari]

A workaround for now is to use a render function instead of a component.

It's simpler than that: they can just forward the properties, it's a 1-2 lines change.

We should add this limitation to the docs.

We try to cover this part in https://material-ui.com/guides/composition/. I doubt we can do more about it, any idea?

Hum, maybe we could enforce the usage of .muiName. This way, we can raise a warning and educate our users with a link to this documentation page? I think that a large part of the issue comes from the frustration it creates.

Related to #12921.

[el1f]

Oh, I just need to compose the props? Sorry guys, never seen that page of the docs :/

[oliviertassinari]

@el1f Yes, you can solve the problem like this:

-   const TabItem = ({ label }) => (
+   const TabItem = ({ label, ...props }) => (
      <Tab
        classes={{
          root: "Tabs-layout__tabs__item",
          labelContainer: "Tabs-layout__tabs__label"
        }}
        label={<TabLabel>{label}</TabLabel>}
        disableRipple
+       {...props}
      />
    );