重现步骤 🕹
链接到实时示例: https://codesandbox.io/s/mui-tooltip-scroll-bug-88jrqh
步骤:
- 将鼠标悬停在一个测试项目上
- 向上或向下滚动
当前行为 😯
工具提示在滚动停止之前一直可见
预期行为 🤔
当用户滚动时,工具提示应该关闭
上下文 🔦
我们有一个带有工具提示的数据表,而在表格中滚动会导致与工具提示的奇怪交互。当用户滚动时,工具提示会保持在视图之外的元素上可见。
你的环境 🌎
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
8条答案
按热度按时间aurhwmvo1#
在这里创建了一个PR:#38390
dhxwm5r42#
这是一个回归问题,它曾经是有效的,证明:
v4.12.4: https://v4.mui.com/components/tooltips/ OK
v5.0.6 https://v5-0-6.mui.com/components/tooltips/ KO
我认为弄清楚是什么导致了这个问题很重要,这样我们就能更好地理解根本原因并采取最佳的修复措施。
t8e9dugd3#
我和你遇到了同样的问题,在滚动正文时没有问题,但是在滚动内部的盒子或div时,问题就出现了。那么如何解决这个问题呢?是在滚动并关闭它的时候吗?
jyztefdp4#
oliviertassinari有关于这个的更新吗?
ndasle7k5#
v4 CodeSandbox ✔️
v5 CodeSandbox ❌
ohfgkhjo6#
对此有任何进一步的发展或提出的解决方案吗?
vlf7wbxs7#
看起来Tooltip是由Michal拥有的,链接是:https://www.notion.so/mui-org/Components-Data-Display-c8b5898e818f41eeae839ac61e053d67?pvs=4#57df8e0eaa8a448cb2ead85c1d3ae28c。Jun的任务已被移除。
55ooxyrt8#
我花时间调试了这个问题,发现它与在 #21761 中完成的 Popper.js 版本升级有关。在 Popper.js v1 之前,它曾经可以正常工作。我通过用 Material UI v4 代码和 Popper.js v1 替换 Tooltip 和 Popper 组件代码来确认这一点,结果如预期般工作。然而,一旦切换到 Popper.js 版本
2.4.4
,它就停止工作了。我无法确定为什么在 Popper.js v2 中出现了这种行为变化。