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

.ant-modal 多了个pointer-events: none,why?? #19502

Closed
1 task
gonenoob opened this issue Oct 31, 2019 · 16 comments
Closed
1 task

.ant-modal 多了个pointer-events: none,why?? #19502

gonenoob opened this issue Oct 31, 2019 · 16 comments
Assignees
Labels
🐛 Bug Ant Design Team had proved that this is a bug.

Comments

@gonenoob
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

不知道哪个版本更新加上的。因为之前使用的是3.17.0是没有这条属性的。之前modal里的select等getPopupContainer是设置在class: ant-modal上的。更新到最新版antd后导致无法操作了

What does the proposed API look like?

是否可以移除掉pointer-events: none

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

ref: #17229

@gonenoob
Copy link
Author

ref: #17229

无法点击是因为有padding导致的吧,为什么要限制modal区域的点击行为?

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

来个在线的复现demo

@ant-design-bot
Copy link
Contributor

Hello @gonenoob. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

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

@yoyo837 yoyo837 added the 🤔 Need Reproduce We cannot reproduce your problem label Oct 31, 2019
@gonenoob
Copy link
Author

来个在线的复现demo

https://codesandbox.io/s/crimson-moon-ipv8x

这个例子可以看ant-modal的样式,无法点击下面24px是因为padding

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

对啊,#17229 就是修复它的。你现在的问题是啥呢?

@gonenoob
Copy link
Author

对啊,#17229 就是修复它的。你现在的问题是啥呢?

那个问题只用把padding去掉就可以修复的
多增加了pointer-events: none

@gonenoob
Copy link
Author

对啊,#17229 就是修复它的。你现在的问题是啥呢?

多增加的pointer-events: none,导致了之前弹窗里Select无法选择,因为设置了getPopupContainer到ant-modal

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

See: a15b601 这24px加的比较早了,不太敢动呀。@afc163

@gonenoob 再来个

设置了getPopupContainer到ant-modal, Select无法选择

的复现demo

@gonenoob
Copy link
Author

See: a15b601 这24px加的比较早了,不太敢动呀。@afc163

@gonenoob 再来个

设置了getPopupContainer到ant-modal, Select无法选择

的复现demo

https://codesandbox.io/s/mutable-wood-7i38c

@yoyo837 yoyo837 added 🐛 Bug Ant Design Team had proved that this is a bug. and removed 🤔 Need Reproduce We cannot reproduce your problem labels Oct 31, 2019
@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

得先弄清楚为什么保留24px, 包括 #17229 也在继续维护这24px,而不是去掉,不然我个人不太敢动,或者等 Owner 来处理。

@afc163
Copy link
Member

afc163 commented Oct 31, 2019

https://codesandbox.io/s/condescending-mendel-g193d

建议 getPopupContainer 到一些自定义的固定 node 上。渲染到 antd 里的内建节点有风险,不确定未来会不会修改样式或者类名。

这个 24px 是为了保证滚到页面底部时 Modal 不会贴在底部,这样会很丑。

@gonenoob
Copy link
Author

https://codesandbox.io/s/condescending-mendel-g193d

建议 getPopupContainer 到一些自定义的固定 node 上。渲染到 antd 里的内建节点有风险,不确定未来会不会修改样式或者类名。

这个 24px 是为了保证滚到页面底部时 Modal 不会贴在底部,这样会很丑。

因为是在ConfigProvider统一配置的,getPopupContainer到modal是比较方便的做法了。如果使用自定义的话,每个modal都要做额外的处理了

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 31, 2019

@afc163 是不是可以换成 margin-bottom ?

@afc163
Copy link
Member

afc163 commented Oct 31, 2019

.ant-modal-body 也比较好,本身是内容区域的节点,未来也不太可能加不可选择的样式。.ant-modal 本身是包括了 mask 的,渲染上来是有一定风险的。

@gonenoob
Copy link
Author

ths,我现在的处理是加到ant-modal-content。

.ant-modal-body 也比较好,本身是内容区域的节点,未来也不太可能加不可选择的样式。.ant-modal 本身是包括了 mask 的,渲染上来是有一定风险的。

ths,我现在的处理是加到ant-modal-content。
后面希望多考虑下风险问题...
现在升级版本的风险有点大

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

4 participants