Skip to content
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

[Popup] Popup 的实现导致 Popup 和基于它的弹窗(比如 Tooltip )容易再也不会出现 #2897

Closed
guxi11 opened this issue Nov 8, 2023 · 8 comments
Assignees
Labels
to be published fixed, not be published

Comments

@guxi11
Copy link
Contributor

guxi11 commented Nov 8, 2023

tdesign-vue 版本

1.7.1

重现链接

https://tdesign.tencent.com/vue/components/tooltip

重现步骤

以 Tooltip 为例,Popup 的复现步骤和它一样:

  1. 在 tooltip 的 demo 中勾选 destroyOnClose
image
  1. 鼠标 hover 上去,然后移开鼠标,在 popup 淡化离开的过程中再将鼠标移上去,就会触发此 bug 。后续再讲鼠标 hover 上去,popup 也不会出现。
image image image

完整的演示视频如下:
https://github.com/Tencent/tdesign-vue/assets/21690043/9111e2a4-216c-485c-be58-24c59e61c026
可以看到 destroyOnClose = false 的时候没有这个问题。

期望结果

期望结果是,每次鼠标 hover 触发器时, Popup 内容都能出现。

实际结果

在 destroyOnClose 的值为 true 的时候,在 popup leaving 的时候鼠标 hover 上去后,popup 将再也不会出现。

框架版本

Vue(3.2.0)

浏览器版本

Chrome(8.213.231.123)

系统版本

MacOS(11.2.3)

补充说明

在业务中,用户反馈 tooltip 消失不见的问题,经过复现之后,发现业务中配置的 tooltip 的位置和内容大小,经常容易导致用户在它们消失的过程中将鼠标移动上去,导致 tooltip 消失。

Copy link
Contributor

github-actions bot commented Nov 8, 2023

👋 @guxi11,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

Copy link
Contributor

github-actions bot commented Nov 8, 2023

♥️ 有劳 @chaishi @Red626 @ikeq @honkinglin @Aicmortal @uyarn 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @guxi11

@guxi11
Copy link
Contributor Author

guxi11 commented Nov 8, 2023

在我们的业务里,我们之前是用这种方法临时修复的这个问题:

.t-tooltip.t-popup--animation-leave-active { /* 覆写组件样式,修复tooltip丢失问题 */
    pointer-events: none;
}

@guxi11
Copy link
Contributor Author

guxi11 commented Nov 8, 2023

分析问题在 popup.tsx 中的这里哈,destroyOnClose = true 时,用户的鼠标如果只是 enter 了,在还没 leave 的时候 popup 就被销毁,那 mouseleave 的事件将不会被触发,导致 mouseInRange = true,在 trigger 触发的时候就会提前中止执行。
image

@guxi11
Copy link
Contributor Author

guxi11 commented Nov 8, 2023

我的修复思路是:如果 popup 在关闭的时候会被销毁,那让它在消失的过程中,不响应鼠标进入事件。
我等下提交这个方案的 pr 哈,大家可以再看看这样可行不。

@chiyu1996
Copy link
Contributor

之前在table的ellipisi:true时弹出tooltip有遇到类似的问题,老是显示一次就不再显示了

@uyarn
Copy link
Collaborator

uyarn commented Nov 14, 2023

之前在table的ellipisi:true时弹出tooltip有遇到类似的问题,老是显示一次就不再显示了

@chiyu1996 应该是一个问题 hover过快会影响 这个版本应该就修复了

@uyarn
Copy link
Collaborator

uyarn commented Nov 23, 2023

fixed in 1.8.0

@uyarn uyarn closed this as completed Nov 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to be published fixed, not be published
Projects
None yet
Development

No branches or pull requests

6 participants