Close button doesn't work when contains any elements

[DimaGashko]

I've added an svg icon to the close button and realized that the button doesn't work anymore.

Reason: you use event delegation slightly incorrect (https://github.com/ghosh/Micromodal/blob/master/lib/src/index.js#L131).

if (event.target.hasAttribute(this.config.closeTrigger)) {
    this.closeModal(event)
}

Solution: replace hasAttribute with closest:

if (event.target.closest(`[${this.config.closeTrigger}]`)) ...

Html:

 <button data-micromodal-close>
        <svg><use xlink:href="#close.svg"></use></svg>
 </button>

p.s. For now I'm just going to use something like:

.modal__close svg {
    pointer-events: none;
}

It's working, but I hope you would fix it.

Details: https://javascript.info/event-delegation

[deniseismo]

I can confirm this: had the same issue where the close button with an svg icon inside wouldn't close properly (occasionally it did work), thought I was tripping. Thanks for the workaround.

[HongPong]

for eslint i put

if (event.target.closest(`[${ this.config.closeTrigger }]`)) {

seems to work as it should. thank you!

[ghosh]

Fixed in #443. Thanks @HongPong for the PR