search

kevcjones / ngx-simple-modal

A simple unopinionated framework to implement simple modal based behaviour in angular (v2+) projects.
MIT License
52 stars 27 forks source link

closeOnClickOutside: true prevents click events to propagate #42

Closed dgmagno closed 5 years ago

dgmagno commented 6 years ago

If I set the closeOnClickOutside flag to true, the code behind disables event propagation. This is not a good practice and could make other libs that depend on clicks to not work properly.

I created a small demo to ilustrate the problem: https://stackblitz.com/edit/ngx-simple-modal-demo-wlmjv1

Maybe you could fix it using some solution like one in this link: https://stackoverflow.com/questions/40107008/detect-click-outside-angular-component

kevcjones-archived commented 6 years ago

Thanks for the demo and suggested fix.

Could you help me understand what the demo demonstrates? I'll take a stab at what I think based on your explanation.

Both the modal and the multiple select box rely on a 'click on background to close'. When the modal is open and then the multiple select is also open, clicking on the background triggers the background of the modal and closes both.

Desired behaviour would be clicking the background while the multiple select is open should only close the multiple select?

I'll look into this and hopeful i'll create a demo with fixes pretty easily 👍

dgmagno commented 6 years ago

Desired behaviour would be clicking the background while the multiple select is open should only close the multiple select?

This is not the expected behaviour. Sorry if I not make myself clear enough.

If I clicked outside of the modal container (grayed overlay) the expected behaviour is to close the modal independent of any content inside of it. This already happens. The problem is with the behaviour when I click inside of the modal.

If I clicked inside the modal and the dropdown is opened, the expected behaviour is that the dropdown closes. This is the dropdown component behaviour. Could be any other component that depends on clicks like a date-picker for instance.

Steps to reproduce what I'm saying: 1 - Click the button to open the modal. 2 - Click the dropdown to open it. 3 - Click outside of dropdown but inside the modal.

Expected behaviour: dropdown closes. Current behaviour: dropdown don't closes.

If you have any more questions please let me know.

kevcjones-archived commented 6 years ago

Still looking into this... the work around for now is to just to disable background clicks for modals where clicking the background needs to close something like the dropdown in your example.