Use a Tooltip component with a Tab

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

Expected Behavior

If I wrap a Tab component in a Tooltip I expect the Tab component to continue reacting to click events

Current Behavior

If the Tab component is wrapped in a Tooltip, any onChange handler specified in the Tabs component to continue operation while the tool tip still displays as normal.

I have made a sandbox here https://codesandbox.io/s/20p06mnxq0 using the material ui example. As you can see it’s possible to switch between Item two and item three but not back to item one.

Current behaviour is that the Tab doesn’t switch.

Examples

i’m on v1.4.0 Sandbox illustrating problem is here https://codesandbox.io/s/20p06mnxq0

Context

I’m trying to add tooltips to each Tab inside a parent Tabs container to help remove ambiguity concerning the icons I have used for the tabs.

[oliviertassinari]

@dimitry12 Here are two options with a disabled tab:

function CloneProps(props) {
  const { children, ...other } = props;
  return children(other);
}

// ...

        <Tabs value={value} onChange={handleChange}>
          <Tab
            label={
              <Tooltip title="can't change back">
                <span>Item One</span>
              </Tooltip>
            }
          />
          <CloneProps>
            {tabProps => (
              <Tooltip title="can't change back">
                <div>
                  <Tab {...tabProps} disabled label={<span>Item Two</span>} />
                </div>
              </Tooltip>
            )}
          </CloneProps>
          <Tab
            style={{ pointerEvents: "auto" }}
            disabled
            label={
              <Tooltip title="can't change back">
                <span>Item Three</span>
              </Tooltip>
            }
          />
        </Tabs>

https://codesandbox.io/s/wy3wwlypol

[oliviertassinari]

          <Tabs value={value} onChange={this.handleChange}>
            <Tab
              label={
                <Tooltip title="can't change back">
                  <span>Item One</span>
                </Tooltip>
              }
            />
            <Tab label="Item Two" />
            <Tab label="Item Three" href="#basic-tabs" />
          </Tabs>