[material-ui][Tooltip] Stays visible on scroll

RobbeB commented 1 year ago

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-tooltip-scroll-bug-88jrqh

Steps:

hover over one of the test items
scroll up or down

Current behavior 😯

The tooltip remains visible until scrolling has stopped

Expected behavior 🤔

The tooltip should close when the user scrolls

Context 🔦

We have a data table with tooltips, and scrolling in the table causes weird interactions with the tooltip. The tooltip will remain visible on an element out of view when the user is scrolling.

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 13.4 Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn npm: 8.19.4 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 115.0.5790.170 Edge: Not Found Safari: 16.5 npmPackages: @emotion/react: 11.10.4 => 11.10.4 @emotion/styled: 11.10.4 => 11.10.4 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.14.0 @mui/icons-material: ^5.8.2 => 5.11.9 @mui/material: ^5.14.0 => 5.14.0 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/styles: ^5.11.11 => 5.11.11 @mui/system: 5.14.0 @mui/types: 7.2.4 @mui/utils: 5.13.7 @types/react: 18.0.28 => 18.0.28 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.7.4 => 4.7.4 ```

RobbeB commented 1 year ago

created a PR here: https://github.com/mui/material-ui/pull/38390

oliviertassinari commented 1 year ago

It's a regression, it used to work, proof:

v4.12.4: https://v4.mui.com/components/tooltips/ OK v5.0.6 https://v5-0-6.mui.com/components/tooltips/ KO

I think it's important we figure out what broke it, so we better understand the root cause to apply the best possible fix.

plaknight commented 1 year ago

I have a same problem with you, when scrolling in the body,that's ok , but when scrolling in the inner box or div, that problem has shown, so how to fix that ? just when scolling and close it ?

charisio commented 1 year ago

@oliviertassinari is there any update on this?

ZeeshanTamboli commented 1 year ago

v4 CodeSandbox ✔️

v5 CodeSandbox ❌

adirksen commented 9 months ago

Have there been any further developments or any proposed solutions for this?

oliviertassinari commented 9 months ago

It looks like Tooltip is owned by Michal https://www.notion.so/mui-org/Components-Data-Display-c8b5898e818f41eeae839ac61e053d67?pvs=4#57df8e0eaa8a448cb2ead85c1d3ae28c. Jun assignment removed.

ZeeshanTamboli commented 9 months ago

I spent time debugging this and found it's related to the upgrade of Popper.js version done in #21761. It used to work before with Popper.js v1. I confirmed this by replacing the Tooltip and Popper component code with Material UI v4 code and Popper.js v1, and it worked as expected. However, it stopped working once I switched to Popper.js version 2.4.4. I couldn't determine why the behavior changed in Popper.js v2 beyond that.

mui / material-ui