mui / mui/material-ui

Using ListItemSecondaryAction within Tooltip logs warning

Open
#28,675 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

scope: tooltip type: expected behavior
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Thank you for building MUI! ❤️

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

Using a ListItemSecondaryAction within a Tooltip logs an error.

The children component of the Tooltip is not forwarding its props correctly.
Please make sure that props are spread on the same element that the ref is applied to.

Expected Behavior 🤔

Using MUI's own components within a Tooltip should not log an error.

Steps to Reproduce 🕹

https://codesandbox.io/s/delicate-paper-fb3c6?file=/src/App.js

Steps:

  1. Just render a component with hierarchy Tooltip > ListItem > ListItemSecondaryAction

Context 🔦

  1. I discovered this while transitioning an app from v4 to v5.
  2. Using the secondaryAction prop of ListItem rather than a using ListItemSecondaryAction as a child does not show the error (but has other effects, changes the dom structure).
  3. I see the demo in v5 is using the secondaryAction prop, but ListItem API docs suggest using ListItemSecondaryAction as a child of ListItem is still supported. https://mui.com/api/list-item/
  4. This error was added to the Tooltip component here: https://github.com/mui-org/material-ui/pull/22775

Your Environment 🌎

`npx @mui/envinfo`
  Chrome
  System:
    OS: Linux 5.4 Linux Mint 20.2 (Uma)
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Firefox: 92.0.1
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.48 
    @mui/icons-material: ^5.0.1 => 5.0.1 
    @mui/lab: ^5.0.0-alpha.48 => 5.0.0-alpha.48 
    @mui/material: ^5.0.1 => 5.0.1 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles: ^5.0.1 => 5.0.1 
    @mui/system:  5.0.1 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: ^16.14.15 => 16.14.15 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    typescript: ^4.0.5 => 4.0.5

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the warning in the linked CodeSandbox with the Tooltip > ListItem > ListItemSecondaryAction hierarchy. Then inspect the Tooltip and ListItemSecondaryAction entry points and add a regression test showing that the supported child usage produces no warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.