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

Drawer组件设置了getContainer并不总是起作用 #41951

Closed
baicoding opened this issue Apr 23, 2023 · 7 comments
Closed

Drawer组件设置了getContainer并不总是起作用 #41951

baicoding opened this issue Apr 23, 2023 · 7 comments
Labels
❓FAQ issues would be discussed a lot

Comments

@baicoding
Copy link

Reproduction link

Edit on CodeSandbox

Steps to reproduce

getContainer在使用时,对应的元素有什么要求,在实际使用时发现下面的问题:
1.getContainer={false},且style={{ position: "relative" }}时,能够正常挂载在对应的div中,
2.去掉style={{ position: "relative" }},会挂载到body中去
3.设置成getContainer={ref.current},将drawer放到上一级div中挂载时无法正常挂载在上一级div中,会挂载在body中,这个时候上一级的div同样设置position: "relative"也不启用,无法正确挂载到div中

What is expected?

能够根据getContainer的设置,正确挂载

What is actually happening?

在不同的情况下,挂载的结果不一样

Environment Info
antd 5.4.4
React 18.2
System windows11
Browser Chrome111.0.5563.111
@zombieJ
Copy link
Member

zombieJ commented Apr 23, 2023

试了一下你的重现,插入位置都是对的:

父容器 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 25 58

父容器无 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 26 39

父容器 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 28 29

父容器无 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 29 15

@zombieJ zombieJ added 🤔 Need Reproduce We cannot reproduce your problem and removed unconfirmed labels Apr 23, 2023
@github-actions
Copy link
Contributor

Hello @baicoding. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x, or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @baicoding, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.xantd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

@baicoding
Copy link
Author

baicoding commented Apr 23, 2023

codesanbox链接
https://codesandbox.io/s/antd-reproduction-template-forked-32risx?file=/index.js

父容器 position: relative + Drawer getContainer=ref.current: 展示效果不对

image

image

子容器能正常显示

image

父容器 position: relative + Drawer getContainer=false:

试了一下你的重现,插入位置都是对的:

父容器 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 25 58

父容器无 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 26 39

父容器 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 28 29

父容器无 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 29 15

试了一下你的重现,插入位置都是对的:

父容器 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 25 58

父容器无 position: relative + Drawer getContainer=false:

截屏2023-04-23 17 26 39

父容器 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 28 29

父容器无 position: relative + Drawer getContainer=ref.current:

截屏2023-04-23 17 29 15

@baicoding
Copy link
Author

baicoding commented Apr 23, 2023

Hello @baicoding. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x, or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @baicoding, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.xantd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f616e7466696e63646e2f79396b776737445643642f726570726f647563652e676966

重现示例
https://codesandbox.io/s/antd-reproduction-template-forked-32risx?file=/index.js

@afc163 afc163 removed the 🤔 Need Reproduce We cannot reproduce your problem label Apr 25, 2023
@zombieJ
Copy link
Member

zombieJ commented Apr 25, 2023

那和 getContainer 就没有关系了哈。getContainer 只关注放入位置。
在 Drawer 里有个逻辑是如果 getContainer=false,会被作为内联元素添加一个 position: absolute。如果是设置 ref,那 Drawer 就不能确定是否是内联展示,则需要自行添加对应样式:
https://codesandbox.io/s/antd-reproduction-template-forked-3e07dp?file=/index.js

@zombieJ zombieJ closed this as completed Apr 25, 2023
@zombieJ zombieJ added the ❓FAQ issues would be discussed a lot label Apr 25, 2023
@afc163
Copy link
Member

afc163 commented Apr 25, 2023

这个 getContainer=false 现在有点潜规则的意思,是不是把 inline 放出来好了。

@zombieJ
Copy link
Member

zombieJ commented Apr 26, 2023

这个 getContainer=false 现在有点潜规则的意思,是不是把 inline 放出来好了。

因为 v4 到 v5 升级的时候 style 和 Modal 对齐从最外层挪到了里面,所以多了一个内联防止 break change。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❓FAQ issues would be discussed a lot
Projects
None yet
Development

No branches or pull requests

3 participants