23rd Feb 2022

Clicking outside modal

I was recently faced with an issue whereby I have a popup modal that has an input. The modal has an overlay on the content with a low opacity. Clicking outside the form should automatically close it... right?!

Problem was that even when clicking the form elements like the input, the modal would close as well because the overlays event listeners are being spread/propagated to its content.

How did I fix it? I'm glad you asked 😌. All I had to do was add a e.stopPropagation() function to the form container so that it would stop inheriting its parents event listeners.

That was pretty much it.