close
The Wayback Machine - https://web.archive.org/web/20210326212548/https://github.com/mui-org/material-ui/issues/25465
Skip to content

/ material-ui

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Tooltip] Provided classes produces console warnings when used around a Textfield #25465

Open
aepp opened this issue Mar 22, 2021 · 3 comments
Open

[Tooltip] Provided classes produces console warnings when used around a Textfield #25465

aepp opened this issue Mar 22, 2021 · 3 comments
Labels
bug 🐛 component: Tooltip good first issue

Comments

@aepp
Copy link

@aepp aepp commented Mar 22, 2021

When defining custom classes tooltip or arrow on a Tooltip component used on a Textfield, the console shows warnings like:
The key tooltip provided to the classes prop is not implemented in ForwardRef(TextField). You can only override one of the following: root.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Warnings are present.

Expected Behavior 🤔

There should be no warnings.

Steps to Reproduce 🕹

Here is a sandbox demonstrating the issue: https://codesandbox.io/s/material-ui-issue-forked-hvgg2

Context 🔦

Your Environment 🌎

Tested in Chrome.

`npx @material-ui/envinfo` 
  npx: installed 2 in 2.983s

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Not Found
    Firefox: 82.0.2
    Safari: 14.0.3
  npmPackages:
    @emotion/react: ^11.1.2 => 11.1.5 
    @emotion/styled: ^11.0.0 => 11.1.5 
    @material-ui/core: ^5.0.0-alpha.19 => 5.0.0-alpha.27 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^5.0.0-alpha.19 => 5.0.0-alpha.27 
    @material-ui/styled-engine:  5.0.0-alpha.25 
    @material-ui/styles:  5.0.0-alpha.27 
    @material-ui/system:  5.0.0-alpha.27 
    @material-ui/types:  5.1.7 
    @material-ui/unstyled:  5.0.0-alpha.27 
    @material-ui/utils:  5.0.0-alpha.27 
    @types/react:  17.0.3 
    react: ^16.13.1 => 16.14.0 
    react-dom: ^16.13.1 => 16.14.0
@oliviertassinari oliviertassinari changed the title [Tooltip] with classes produces console warnings when used around a Textfield [Tooltip] Provided classes produces console warnings when used around a Textfield Mar 24, 2021
@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Mar 24, 2021

@aepp Thanks for reporting this issue. While the warning is no longer present in v5.0.0-alpha.28. It doesn't change the fact that classes leak. It's not supposed to inherit. For instance:

import React from "react";
import Tooltip from "@material-ui/core/Tooltip";

export default function Demo() {
  return (
    <Tooltip
      title="test title"
      classes={{
        arrow: "arrow",
        tooltip: "tooltip"
      }}
    >
      <input />
    </Tooltip>
  );
}

Screenshot 2021-03-24 at 15 42 37

I would propose this fix:

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 336bcd67d2..9b84af6b46 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -224,6 +224,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   const {
     arrow = false,
     children,
+    classes: classesProp,
     describeChild = false,
     disableFocusListener = false,
     disableHoverListener = false,

@aepp Do you want to take care of it?
@baterson
Copy link
Contributor

@baterson baterson commented Mar 24, 2021

@oliviertassinari I can take it @aepp if you don't mind
@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Mar 24, 2021

@baterson sure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 component: Tooltip good first issue
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
@oliviertassinari @aepp @baterson