search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.7k forks source link

Modal registers scroll bar click as backdrop click and closes #5810

Open andre-gois opened 4 years ago

andre-gois commented 4 years ago

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

thanhdn1989 commented 4 years ago

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

Basketblo commented 4 years ago

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)

andre-gois commented 4 years ago

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.

FirassKoubaa commented 3 years ago

is there any news fo this bug ??

Hleb-Chupin commented 3 years ago

How are the things today?

florenthobein commented 3 years ago

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 commented 3 years ago

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.

Hleb-Chupin commented 3 years ago

Any news on that case?

florenthobein commented 3 years ago

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

ViralDPatel commented 2 years ago

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