Using ListItemSecondaryAction within Tooltip logs warning
Nobody has claimed this yet.
- 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
childrencomponent 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:
- Just render a component with hierarchy
Tooltip>ListItem>ListItemSecondaryAction
Context 🔦
- I discovered this while transitioning an app from v4 to v5.
- Using the
secondaryActionprop ofListItemrather than a usingListItemSecondaryActionas a child does not show the error (but has other effects, changes the dom structure). - I see the demo in v5 is using the
secondaryActionprop, butListItemAPI docs suggest usingListItemSecondaryActionas a child ofListItemis still supported. https://mui.com/api/list-item/ - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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