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

Popover 内容高度变化时,无法重新定位 #6794

Closed
guoyunhe opened this issue Dec 10, 2024 · 2 comments · Fixed by #6795
Closed

Popover 内容高度变化时,无法重新定位 #6794

guoyunhe opened this issue Dec 10, 2024 · 2 comments · Fixed by #6795
Labels

Comments

@guoyunhe
Copy link
Contributor

Version of antd-mobile

5.38.1

Operating system and its version

Android

Browser and its version

15

Sandbox to reproduce

https://codesandbox.io/p/sandbox/fervent-darwin-gj2x7v

What happened?

Popover 内容为异步加载,即在展开之后高度会发生变化,这时 Popover 的气泡并不会动态调整位置,导致错位

image

image

Relevant log output

No response

@guoyunhe guoyunhe added the bug label Dec 10, 2024
@zombieJ
Copy link
Member

zombieJ commented Dec 10, 2024

感觉加个 ResizeObserver 能解,不过移动端上比较关注性能,是不是应该做一个开关来支持?

@guoyunhe
Copy link
Contributor Author

guoyunhe commented Dec 10, 2024

@zombieJ 底层的 @floating-ui/dom 是支持 ResizeObserver 动态检测大小变化的,我测试它的例子是生效的 https://codesandbox.io/p/sandbox/elegant-goodall-m72vgy 但是不知道为什么到了 antd-mobile 里没有生效,不只是大小变化没有更新,滚动页面也没有更新。怀疑是这段代码逻辑没有生效:

useEffect(() => {
const floatingElement = floatingRef.current
if (!targetElement || !floatingElement) return
return autoUpdate(targetElement, floatingElement, update, {
elementResize: typeof ResizeObserver !== 'undefined',
})
}, [targetElement])

Update: 确实是上面这个 useEffect 有问题,如果 Popover 默认是关闭的(大多数使用场景),那么执行 useEffect 时,floatingElement 肯定是 null,autoUpdate 就必然不会生效了。而文档的实例都是 defaultVisible 的,因此没有这个问题。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants