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

[DropDown] 组件悬停出现列表后,某些情况下会出现变量错误,导致后续悬停功能失效 #2598

Closed
loganylwu opened this issue Jul 20, 2023 · 10 comments
Assignees
Labels
to be published fixed, not be published

Comments

@loganylwu
Copy link
Contributor

loganylwu commented Jul 20, 2023

重现链接

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

参考操作手法
#2598 (comment)
经过我测试发现,其实在#2352 是最稳定的复现逻辑了,错误原因也是一样

重现步骤

复现步骤比较麻烦,请参考视频

期望结果

悬停能正常显示

实际结果

悬停不能正常显示

Environment Info
相关版本 1.4.8
框架版本 / 基础库版本 vue(2.6.x)
系统、浏览器 全部
Node版本 全部
@github-actions
Copy link
Contributor

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

@github-actions
Copy link
Contributor

github-actions bot commented Jul 20, 2023

♥️ 有劳 @Nick-Tsao @Red626 @uyarn 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @loganylwu

@loganylwu
Copy link
Contributor Author

2023-07-20.11.19.23.mov

@loganylwu
Copy link
Contributor Author

loganylwu commented Jul 20, 2023

协助处理问题

经过调试和分析,我得出结论
无法打开悬停内容,是因为

if (visible && this.mouseInRange) return;

此处判断变量visible=>true && mouseInRange=>true,导致直接return了。

请注意,mouseInRange大部分情况都是false,只有视频中少部分情况才是true。具体怎么复现的,和鼠标位置应该有关系。

组件命名已经关闭了,为什么还会出现mouseInRange=true的情况呢?

  • 因为在下拉框关闭期间,是有使用setTimeout(delay)的逻辑的,我怀疑是在delay期间,鼠标恰巧进入到了下拉框元素内,而此时由于没有屏蔽掉.popup.tsx中的onMouseEnter/onMouseLeave,导致mouseInRange变量被修改为true。
    onMouseEnter() {
    this.mouseInRange = true;
    this.handleOpen({});
    },

建议修改方向

方案1. dropdown需要再动画结束后,即组件真正已经销毁后,再进行关闭事件的调用
方案2. 在popup.tsx中,visible=true的时候,立刻禁止事件执行或立刻关闭相关事件。
image

@loganylwu
Copy link
Contributor Author

#2594

@loganylwu
Copy link
Contributor Author

#2280

@loganylwu
Copy link
Contributor Author

#2352

@uyarn uyarn added the to be published fixed, not be published label Jul 25, 2023
@uyarn uyarn added 🏃🏻 in progress someone is handling and removed to be published fixed, not be published labels Jul 25, 2023
@uyarn uyarn added to be published fixed, not be published and removed 🏃🏻 in progress someone is handling labels Aug 23, 2023
@xiaosansiji
Copy link
Collaborator

fixed in 1.6.4

@loganylwu
Copy link
Contributor Author

测了一下,1.6.4版本依然会有问题,多点击2次就出现了
https://stackblitz.com/edit/angular-asuhkv-fzdpmh?file=package.json

@chaishi chaishi reopened this Oct 8, 2023
@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

5 participants