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组件多层级情况下,当父盒子滚动时,多层级的popup位置异常不跟随滚动 #48949

Open
xinbo97 opened this issue May 16, 2024 · 3 comments
Labels
🐛 Bug Ant Design Team had proved that this is a bug.

Comments

@xinbo97
Copy link

xinbo97 commented May 16, 2024

Reproduction link

Edit on StackBlitz

Steps to reproduce

1.点击 测试滚动 按钮出现下拉框;
2.点击下拉框中的 sub menu 出现子层级;
3.对父盒子进行y轴滚动;
4.发现sub meun 子层级盒子不跟随父盒子滚动而滚动

What is expected?

期望 多层级 下各个popup都可以跟随父盒子滚动而滚动。

What is actually happening?

多层级下子层级位置异常,不跟随父盒子滚动而滚动

Environment Info
antd 5.17.2
React v18.x
System windows
Browser chrome/Edge
Copy link

stackblitz bot commented May 16, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@zombieJ zombieJ added 🐛 Bug Ant Design Team had proved that this is a bug. and removed unconfirmed labels May 16, 2024
@afc163 afc163 changed the title Draopdown组件多层级情况下,当父盒子滚动时,多层级的popup位置异常不跟随滚动 Dropdown组件多层级情况下,当父盒子滚动时,多层级的popup位置异常不跟随滚动 May 20, 2024
@LiuSen688
Copy link

image
我对比了 Menu 组件 和 Dropdown 组件的多层级被包裹在一个包含滚动条的容器当中的情况。

Menu 组件的二级菜单样式中的 inset 属性值会随着容器内滚动条滚动而发生变化,即Menu的二次菜单会随着滚动条一起移动;

Dropdown 组件的二级菜单样式中的 inset 属性值不会随着容器内滚动条滚动而变化,所以 Dropdown 的二级菜单不会随着滚动条一起移动。

怀疑 Dropdown 组件没有处理被包裹在带有滚动条容器当中时,随着滚动条动态设置 inset 属性值

希望对大家有所帮助

@zombieJ
Copy link
Member

zombieJ commented May 22, 2024

一级弹层本身是在 scroll 容器外,而容器滚动时会使得一级弹层同步移动,而对于二级弹层是没有监听到容器滚动的(因为一级弹层没有在容器里)。
感觉需要一个通知机制告知子元素可能存在的滚动情况。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Ant Design Team had proved that this is a bug.
Projects
None yet
Development

No branches or pull requests

3 participants