Material-ui: Use a Tooltip component with a Tab

[ianoti]

• [x] This is a v1.x issue.
• [x] 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.

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[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>

[dimitry12]

This still doesn't work if Tab is disabled. Any recommendations?

[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

[astorije]

The first option is much nicer than the second method (in terms of margins, and the tooltip triggers on the whole clickable element, not just the text, see screenshots below), but unfortunately raises those in the JS console:

Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div
    in RootRef
    in Tooltip
    ...

Warning: React does not recognize the `textColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div
    in RootRef
    in Tooltip
    ...

Warning: Received `false` for a non-boolean attribute `indicator`.
If you want to write it to the DOM, pass a string instead: indicator="false" or indicator={value.toString()}.
If you used to conditionally omit it with indicator={condition && value}, pass indicator={condition ? value : undefined} instead.
    in div
    in RootRef
    in Tooltip
    ...

Option 1 | Option 2
--- | ---
|

@oliviertassinari, do you have any idea if those JS errors can be fixed?

[oliviertassinari]

@astorije I have updated the demo to fix the warning.