Material-ui: [Tooltip] Causes SpeeDialAction propTypes warnings

[acroyear]

SpeeDialAction is showing propTypes warnings in 1.4.0 / Lab alpha 6.

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

No warnings or errors in console.

Current Behavior

index.js:2178 Warning: Failed prop type: The following properties are not supported: className, onKeyDown. Please remove them.
in Tooltip (created by WithStyles(Tooltip))
in WithStyles(Tooltip) (created by SpeedDialAction)
in SpeedDialAction (created by WithStyles(SpeedDialAction))

Steps to Reproduce

Just add a speed dial - these warnings started showing up in 1.4.0/alpha 6. They weren't there in 1.3.1/alpha 5.

nothing in my code is attempting to do anything with the tooltips that SpeedDialAction uses internally.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.4.1/alpha6 |
| React | 1.4.1 |
| browser | Chrome 68 |
| etc. | |

[klis87]

I think this is Tooltip issue, my stacktrace is:

checkPropTypes.js:19 Warning: Failed prop type: The following properties are not supported: className. Please remove them.
in Tooltip (created by WithStyles(Tooltip))
in WithStyles(Tooltip) (created by ContractCard)
in div (created by CardActions)
in CardActions (created by WithStyles(CardActions))
in WithStyles(CardActions) (created by ContractCard)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by Card)
in Card (created by WithStyles(Card))
in WithStyles(Card) (created by ContractCard)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by ContractCard)
in ContractCard (created by Contracts)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Contracts)
in div (created by Contracts)
in Contracts (created by Connect(Contracts))
in Connect(Contracts) (created by WithStyles(Connect(Contracts)))
in WithStyles(Connect(Contracts)) (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in Layout (created by Connect(Layout))
in Connect(Layout) (created by WithStyles(Connect(Layout)))
in WithStyles(Connect(Layout))
in PersistGate (created by ClientProviders)
in MuiPickersUtilsProvider (created by ClientProviders)
in I18nextProvider (created by ClientProviders)
in Provider (created by ClientProviders)
in MuiThemeProvider (created by ClientProviders)
in ClientProviders

and I dont do anything fancy, especially I dont pass any className to Tooltip component.

The only thing which might be important is that I render some tooltips conditionally, for instance:

        {data.token && (
          <Tooltip title="Some title">
            <IconButton
              onClick={() => someHandler(data.token, data.id)}
            >
              <ThumbDown />
            </IconButton>
          </Tooltip>
        )}

[andokai]

I imagine this is due to the Tooltip component being reworked in 1.4 and the speed dial hasn't caught up.

[go2ready]

Same here

[mbrookes]

This appears to be fixed in HEAD. The next release should drop shortly.

[mbrookes]

Could anyone who was experiencing this issue please confirm if it is fixed with the latest release of core?

[klis87]

@mbrookes I can still see checkPropTypes.js:19 Warning: Failed prop type: The following properties are not supported: className but I dont know whether this is related to this issue.

[mbrookes]

@klis87 What are the next few lines of the stacktrace?

[klis87]

@mbrookes checkPropTypes.js:19 Warning: Failed prop type: The following properties are not supported: className. Please remove them.
in Tooltip (created by WithStyles(Tooltip))
in WithStyles(Tooltip) (created by ContractCard)
in div (created by CardActions)
in CardActions (created by WithStyles(CardActions))
in WithStyles(CardActions) (created by ContractCard)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by Card)
in Card (created by WithStyles(Card))
in WithStyles(Card) (created by ContractCard)
in div (created by Link)
in Link (created by Connect(Link))
in Connect(Link) (created by ContractCardLink)
in ContractCardLink (created by ContractCard)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by ContractCard)
in ContractCard (created by Contracts)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Contracts)
in div (created by Contracts)
in Contracts (created by Connect(Contracts))
in Connect(Contracts) (created by WithStyles(Connect(Contracts)))
in WithStyles(Connect(Contracts))
in Unknown (created by Connect(Component))
in Connect(Component) (created by Layout)
in div (created by Layout)
in div (created by Layout)
in div (created by Layout)
in Layout (created by Connect(Layout))
in Connect(Layout) (created by WithStyles(Connect(Layout)))
in WithStyles(Connect(Layout))
in PersistGate (created by ClientProviders)
in MuiPickersUtilsProvider (created by ClientProviders)
in I18nextProvider (created by ClientProviders)
in Provider (created by ClientProviders)
in MuiThemeProvider (created by ClientProviders)
in ClientProviders

[mbrookes]

Okay, not directly related to this issue then.

[klis87]

@mbrookes ok so I will create another issue today, some heads-up - I recall that somewehere there was title bug as well and it is not fixed as well, at least with my use case, I will prepare some demos today

[andokai]

Fixed for me 👍

[andokai]

Actually I spoke too soon. I'm still seeing it.

[zanerock]

This is still an issue in core 1.4.1 / labs alpha 7

index.js:2178 Warning: Failed prop type: The following properties are not supported: className, onKeyDown. Please remove them.
in Tooltip (created by WithStyles(Tooltip))
in WithStyles(Tooltip) (created by SpeedDialAction)
in SpeedDialAction (created by WithStyles(SpeedDialAction))
in WithStyles(SpeedDialAction)

In SpeedDial line 146 (master@2018-07-27) onKeyDown is being added to the props sent to SpeedDialAction, which then forwards it to Tooltip on line 62 in SpeedDialAction

[mbrookes]

@zanerock I don't know why I'm not seeing this error, but since you've narrowed it down, would you like to fix it?

[zanerock]

@mbrookes Certainly, though I'm a bit busy pushing out a release now. If it's still open next-week-ish, I'll look into it. I've set a reminder.

I'm not looking at the code at the moment, but it may be that if it's necessary to include the tooltip title to trigger the problem.

[zanerock]

This may be related to #12361 - Speeddial not accessible by tab. There elaboration on my comment to the closed PR.

[Primajin]

Got a similar issue and I'm running "@material-ui/core": "^1.5.0", - so seems to not being fixed yet.

It seems to be when a Tooltip sits in CardActions and child components use className

[printjs]

When will it be solved?

[eps1lon]

Located the issue. I'm working on a fix.

[nbkhope]

I'm getting the warning for simply using a Tooltip in 1.5.1
Would it be possible for a hotfix to be applied to 1.5.x? We want to wait some time before going to 3.0.

[mbrookes]

Despite the jump in major version, as you'll see from the release notes, there's no real reason to wait before going to 3.x.

[kevinhughes27]

I upgraded to 3.x.x with no issues. Also this issue is still present in the latest version.

[Primajin]

Yes no current version - no matter how high - will fix it until @eps1lon finished his fix :wink: We're counting on you :tada:

[eps1lon]

You should not be getting any warnings as of @material-ui/[email protected].

className on SpeedDialAction was reintroduced in #13161 and should be released when the next patch of the core will be released.