Overlay catches click when clicking the modal
So, I have an overlay with a Modal in the center of the screen. Inside is an input element that has a custom datalist beneath it. All behaves normal. When I click anything in the modal nothing odd happens and the clicks are correctly registered as the item being clicked on (
e.target is logical). The modal is a child of the Overlay.
When one or more items are added in the datalist, even without adding any additional event handlers, it makes clicks inside the modal register as if the overlay was clicked (e.target === e.currentTarget). I'm out of options since I cannot distinguish anymore what is actually clicked.
Even adding a click handler on the Modal with e.stopPropagation() doesn't help, because it doesn't register as the modal being clicked at all. I've tried Z-index as well. This bevior is the same in FireFox and Safari.
Any ideas as to what else I can try?10 Replies
Please create a minimal working (broken?) example in Codepen. Without setting code it’s impossible to say.
See #How To Ask Good Questions for more info
Copy. Working on it
Weirdly enough I am unable to reproduce it in the pen.
https://codepen.io/Parseq/pen/YzRVQzM
Just out of curiosity, why aren't you using the modal element built-in to HTML?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
: The Dialog element - HTML: HyperText Markup Language | MDN
The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
How far back can it be used for older browsers?
A long way back (on Chrome), not so long for the rest:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#browser_compatibility
2014 for Chrome
2022 for Safari…so not that long there, I guess
That's what I thought
Do you need to support browsers that haven't been updated in over a year?
Well, possibly older Macs yes
Until I release an Electron-based app (if I do that)