Opening the drawer and then opening the modal from the drawer in combination with React Router sets the overflow: hidden on <body> element #21539

bouchja1 · 2020-02-22T22:22:44Z

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

Reproduction link

Steps to reproduce

start react app
localhost:3000 is loaded in the browser and there is element.style {} on html body element defined as expected
click on "show drawer" button
element.style {
overflow: hidden;
touch-action: none;
} is set correctly on element because we have opened a Drawer component
click on "ABC" or "DEF" buttons inside the Drawer
close modal
close drawer
element.style {} is set correctly on elelemt
click "Different" in list type item menu
element.style { overflow: hidden; } is set on html body element of this page and I am not able to scroll until I refresh a browser

What is expected?

When both drawer and modal components are closed and I am linked to a different place in my single-page web app, I will be able to scroll a page.

What is actually happening?

When I open drawer component and then open modal component inside the drawer component, close both and am linked to a different place in my single-page web app, scrolling is not working because { overflow: hidden; } style is set to html body element

Environment	Info
antd	3.26.11
React	^16.12.0
System	macOS
Browser	Chrome, Safari...

Please, is there any "hack" or something similar to make it work?

bouchja1 · 2020-02-22T22:24:20Z

I am not sure if this could be fully reproduced in CodeSandbox so you can clone and run my simple demo project here (https://github.com/bouchja1/ant-react-router-bug). Btw. if I set:

body { 
 ...
overflow: inherit|scroll|visible... (except hidden)
}

...I am temporarily ok with this hack... but should there occur any problem with this hack?

bouchja1 · 2020-02-26T21:04:24Z

Or probably better solution with

useEffect(() => { document.body.removeAttribute('style'); });

Placed before router switch. It wont make a background scroll while a modal is opened.

AceNorth · 2020-03-04T19:05:25Z

Seeing the same issue, even without navigating to another page - if you dismiss a modal inside a drawer component, it will set { overflow: hidden; } on the html body.

You can also do document.body.style.removeProperty('overflow') as a hacky workaround a little less drastic than the above, until this issue is fixed.

bouchja1 · 2020-03-10T13:56:27Z

Seeing the same issue, even without navigating to another page - if you dismiss a modal inside a drawer component, it will set { overflow: hidden; } on the html body.

You can also do document.body.style.removeProperty('overflow') as a hacky workaround a little less drastic than the above, until this issue is fixed.

Hi @AceNorth, I have the same issue as you mentioned after I have upgraded to Ant v4.

overflow: hidden even without navigation to another page. So the temporary solution with document.body.style.removeProperty('overflow') does not work anymore.

I did not see any comments from Ant team. Don't know if this could be considered as a bug... or this is an intention.

AceNorth · 2020-03-10T17:53:18Z

@bouchja1 It should still work, I think - you don't need to navigate to another page to call that function. I've added it as an afterClose method to the antd modal that was causing the problem.

afc163 · 2020-05-12T08:21:44Z

open drawer in https://ant.design/components/drawer-cn/#components-drawer-demo-render-in-current
open drawer in http://127.0.0.1:8001/components/drawer-cn/#components-drawer-demo-basic-right
close second drawer

Then the whole page lost scroll bar.

jljsj33 · 2020-06-08T07:48:14Z

这啥鬼问题啊，，为什么点 router 会加 overflow ？

jljsj33 · 2020-06-08T07:53:23Z

单个 overflow: hidden 应该是 modal 里加的。。。抽屉是加overflow: hidden; touch-action: none;

jljsj33 · 2020-06-08T10:10:08Z

https://github.com/react-component/dialog/blob/master/src/Dialog.tsx#L129, 这时的问题，，，那个谁还在给你们搞没，，@afc163

jljsj33 · 2020-06-08T10:10:29Z

this. inTransition 干吊用的？？

afc163 · 2020-06-08T10:11:57Z

cc @shaodahong

jljsj33 · 2020-06-08T10:15:56Z

不对，，好像在 willunmount 之前刷了遍，，我晚上看下吧。。

jljsj33 · 2020-06-08T11:35:57Z

https://github.com/react-component/dialog/blob/master/src/Dialog.tsx#L150, 这里的问题，，这个加着干啥用的，是为了什么功能？？@shaodahong

jljsj33 · 2020-06-08T11:39:14Z

如果是 1 的话不需要加 hidden 啊，前面的会处理的啊，leave 不是为了关闭吗？？咋还放个开启的？？

shaodahong · 2020-06-08T11:46:55Z

https://github.com/react-component/dialog/blob/master/src/Dialog.tsx#L150, 这里的问题，，这个加着干啥用的，是为了什么功能？？@shaodahong

switchScrollingEffect 里面会判断的

shaodahong · 2020-06-08T11:47:32Z

这个 issue 的核心问题是用了 openCount 来判断是不是 effect，而 drawer 只有在某些情况下才会是 effect

jljsj33 · 2020-06-08T11:49:49Z

不对，，抽屉打开的时候，，openCount 就是 1 了，，，再开 modal 时， openCount 就是 2 了，，那关闭 modal 时就会触发 openCount =1 的问题了，，所以在关闭时要必须是 close 状态的，，现在关闭时会触发 open 的状态

jljsj33 · 2020-06-08T11:50:03Z

加了个判断。。

shaodahong · 2020-06-08T11:51:10Z

不对，，抽屉打开的时候，，openCount 就是 1 了，，，再开 modal 时， openCount 就是 2 了，，那关闭 modal 时就会触发 openCount =1 的问题了，，所以在关闭时要必须是 close 状态的，，现在关闭时会触发 open 的状态

我会同时判断 openCount === 1和 isEffect

jljsj33 · 2020-06-08T11:51:13Z

leave 里只管理关闭状态，，关闭状态必须在 openCount 为 0 时才触发...

jljsj33 · 2020-06-08T11:52:46Z

https://github.com/react-component/util/blob/master/src/PortalWrapper.js#L145-L156, 没有 isEffect 啊

shaodahong · 2020-06-08T11:53:07Z

https://github.com/react-component/util/blob/master/src/PortalWrapper.js#L145-L156, 没有 isEffect 啊

Object.keys(cacheOverflow).length 这个就是

jljsj33 · 2020-06-08T11:54:06Z

这个不应该放在这里，，不是所有页面都会有 scroll 的

shaodahong · 2020-06-08T11:56:20Z

这个不应该放在这里，，不是所有页面都会有 scroll 的

Modal 和 Drawer 都公用了这个，放在最底层没什么问题吧

shaodahong · 2020-06-08T11:57:26Z

是 openCount 的问题，openCount 不能作为 effect 的判断，要单独拉出来一个 effectCount 这种

jljsj33 · 2020-06-08T12:01:33Z

我感觉是 overflow 和 scrollEffect 的方法你混在一起了的问题，，，应该分开，drawer 里的 overflow 时内部实现了的。。。

shaodahong · 2020-06-08T12:02:00Z

Similar issue: #21894

jljsj33 · 2020-06-08T12:03:46Z

还有，，我上面的修复的逻辑也没错，，，animateLeave 时只管 openCount 为 0 时去切换 scrollEffect 的状态。。。

jljsj33 · 2020-06-08T12:21:33Z

想了一下，，放在一起好像也可以，，如果没有滚动条，，都不需要设 overflow: hidden，，先就放一起吧，我把 drawer 里的删了。。主要问题就是 animateLeave 时没做判断。。。

shaodahong · 2020-06-08T12:27:58Z

想了一下，，放在一起好像也可以，，如果没有滚动条，，都不需要设 overflow: hidden，，先就放一起吧，我把 drawer 里的删了。。主要问题就是 animateLeave 时没做判断。。。

可以试试，后期还是要解决 openCount 的问题

jljsj33 · 2020-06-08T14:05:42Z

你看吧，，这个全权交给你了。。。

fix: ant-design/ant-design#21539

jljsj33 · 2020-06-08T14:20:12Z

reinstall antd

KhoiNK · 2020-06-22T10:13:23Z

I have the same problem. Have it get fixed yet?

Reproduce steps:

Click Open buton
Click open modal button on the Drawer
Close modal and drawer
Click open modal button on the main page
Now the page is not scrollable.

Environment	Info
antd	3.25.1
React	^16.9.0
System	macOS
Browser	Chrome, Safari...

RushilBasappa · 2020-06-26T01:41:42Z

Facing similar issue. Is there any alternative fix?

Using antd v3 which uses rc-dialog version of ~7.6 as its dependency

jaysonberryhill · 2020-11-03T14:09:34Z

Yea I am having the same issue. Do we know if/when a fix will be included in an upcoming release?

vinaybagale · 2020-11-20T09:22:14Z

It is still happening in version 4.8.4.

JacopoLuri · 2021-05-05T16:09:36Z

Still happened to me today.

solved with

afterClose={document.body.removeAttribute('style')}

Alt-er · 2021-07-14T04:39:26Z

我也遇到了这个问题

afterClose={()=>{
setTimeout(()=>{ document.body.removeAttribute('style')} , 0)
}}

还必须使用setTimeout 才能重现滚动条

disguised-uchiha · 2021-10-01T10:25:05Z

afterClose={()=>document.body.style.removeProperty('overflow')}
this worked for me.
There is an afterClose property in Modal component.

afc163 mentioned this issue Mar 5, 2020

Opening the drawer and then opening a modal.When the modal is closed,the scroll bar disappears.先开一个drawer再开一个modal，modal关闭时，页面滚动条消失 #21894

Closed

1 task

ant-design-bot added the Inactive label Apr 11, 2020

afc163 mentioned this issue Jun 8, 2020

drawer 在 getContainer={false} 两种共存时不清除 overflow: hidden #24821

Closed

1 task

jljsj33 closed this as completed in react-component/dialog@68b9472 Jun 8, 2020

jljsj33 added a commit to react-component/dialog that referenced this issue Jun 8, 2020

Merge pull request #189 from react-component/fix-leave-effect

cd20fcd

fix: ant-design/ant-design#21539

afc163 mentioned this issue Jun 29, 2020

fix: Drawer scrollbar issue #25273

Merged

17 tasks

afc163 mentioned this issue Dec 24, 2020

feat: add ScrollLocker react-component/util#179

Merged

Opening the drawer and then opening the modal from the drawer in combination with React Router sets the overflow: hidden on <body> element #21539

Opening the drawer and then opening the modal from the drawer in combination with React Router sets the overflow: hidden on <body> element #21539

Comments

bouchja1 commented Feb 22, 2020 • edited

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

bouchja1 commented Feb 22, 2020 • edited

bouchja1 commented Feb 26, 2020

AceNorth commented Mar 4, 2020

bouchja1 commented Mar 10, 2020

AceNorth commented Mar 10, 2020 • edited

afc163 commented May 12, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020 • edited

jljsj33 commented Jun 8, 2020

afc163 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

shaodahong commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

jljsj33 commented Jun 8, 2020

KhoiNK commented Jun 22, 2020 • edited

RushilBasappa commented Jun 26, 2020 • edited

jaysonberryhill commented Nov 3, 2020

vinaybagale commented Nov 20, 2020

JacopoLuri commented May 5, 2021

Alt-er commented Jul 14, 2021 • edited

disguised-uchiha commented Oct 1, 2021

bouchja1 commented Feb 22, 2020 •

edited

bouchja1 commented Feb 22, 2020 •

edited

AceNorth commented Mar 10, 2020 •

edited

jljsj33 commented Jun 8, 2020 •

edited

KhoiNK commented Jun 22, 2020 •

edited

RushilBasappa commented Jun 26, 2020 •

edited

Alt-er commented Jul 14, 2021 •

edited