ngx-bootstrap icon indicating copy to clipboard operation
ngx-bootstrap copied to clipboard

Modal registers scroll bar click as backdrop click and closes

Open andre-gois opened this issue 5 years ago • 10 comments

Modal registers scroll bar click as backdrop click and closes. On modals with long content I can scroll with the trackpad and/or mousewheel just fine, but when I click and drag the browser's scrollbar the modal closes.

Happens on the documentation page: https://valor-software.com/ngx-bootstrap/#/modals#scrolling-long-content

ngx-bootstrap: 5.6.1 Angular: 9

andre-gois avatar Jun 08 '20 13:06 andre-gois

Modal registers scroll bar click as backdrop click and closes. On modals with long content I can scroll with the trackpad and/or mousewheel just fine, but when I click and drag the browser's scrollbar the modal closes.

Happens on the documentation page: https://valor-software.com/ngx-bootstrap/#/modals#scrolling-long-content

ngx-bootstrap: 5.6.1 Angular: 9

i raised this issue long time ago and it still there on the newest version

thanhdn1989 avatar Jun 13 '20 06:06 thanhdn1989

The same issue here, in vanilla Bootstrap everything works fine, but with ngx-bootstrap I could reproduce an issue even in example on the website: https://valor-software.com/ngx-bootstrap/#/modals#scrolling-long-content

ngx-bootstrap: 5.6.1 Angular: 9 Browser: Chrome 83.0.4103.61 (Official Build) (64-bit)

Basketblo avatar Jun 17 '20 12:06 Basketblo

If I try to change the version of the exemple website the problem start happening in release 5.5.0 (https://valor-software.com/ngx-bootstrap/old/5.5.0/#/modals#scrolling-long-content), 5.4.0 was fine (https://valor-software.com/ngx-bootstrap/old/5.4.0/#/modals#scrolling-long-content). For now maybe a downgrade could be an option for some projects.

andre-gois avatar Jun 19 '20 15:06 andre-gois

is there any news fo this bug ??

FirassKoubaa avatar Oct 30 '20 16:10 FirassKoubaa

How are the things today?

Hleb-Chupin avatar Dec 11 '20 06:12 Hleb-Chupin

It seems there is a duplicate of this issue on #5893 that provides a fix in the commit 87e7df8e9bdf5d7269bc3727286f2576a2a4273e Could we perhaps merge it for the next release? It is really an irritating bug for my clients.

florenthobein avatar Jan 26 '21 11:01 florenthobein

My bad, it seems the fix proposed doesn't actually work.

When looking more into the problem, it appears that on some browsers (for ex Chrome 87 on mac) the scrollbar appears above the content without modifying the layout, thus equating scrollbar click and backdrop click. The reason why this bug is relatively new is that, when clicking on the scrollbar, the events mousedown and mouseup fire, but not click, and the use of mousedown & mouseup has been introduced in the fix #5326 .

Coincidentally other librairies relying on bootstrap seem to have had the exact same problem, and have fixed this issue by replacing mouseup by click. That seems to do the trick for me, I'll propose a PR with this solution.

florenthobein avatar Jan 27 '21 07:01 florenthobein

Any news on that case?

Hleb-Chupin avatar Feb 15 '21 06:02 Hleb-Chupin

@Hleb-Chupin the fix has been merged, it will be available in the next version of the library (I suppose)

florenthobein avatar Feb 15 '21 13:02 florenthobein

Still issue in version 8.0.0, showing merged but still not working in current version, last working in version 5.4.0 then after issue in all versions, this is critical issue, large height modal is not usable without fix, need to take as priority and release in next sub version

ViralDPatel avatar Jan 20 '22 13:01 ViralDPatel