Adding Inline-SVG to close Button doesn't work.

[nordentwickler]

<button aria-label="Close modal" data-micromodal-close="" class="inline-flex bg-jz-blue text-jz-yellow"> close
                    
<svg class="w-6 h-6 ml-2 fill-current" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
	<path d="M2.62,87.99L40.18,50L2.62,12.01C-0.8,8.88-0.87,5.68,2.4,2.41s6.47-3.2,9.6,0.21L50,40.19L87.99,2.62c3.13-3.42,6.33-3.49,9.6-0.21s3.2,6.47-0.21,9.6L59.82,50l37.57,37.98c3.42,3.13,3.49,6.33,0.21,9.6s-6.47,3.2-9.6-0.21L50,59.81L12.01,97.38c-3.13,3.42-6.33,3.49-9.6,0.21S-0.8,91.12,2.62,87.99z"></path>
</g>
</svg>
</button>

While using something like tailwindcss, inline SVG's are a way to go. But using an inline SVG in a close button, you can't click on the SVG. No strange Styling applied. The "word" close is working.

[alesvojta]

There will be probably some issue with event target handling. Adding [data-micromodal-close] on svg element could help a bit.

[binyamin]

It's not just inline-svg; any child element has this effect for me.

[alesvojta]

@b3u Yeah.
Another workaround could be to cover the children with transparent pseudo element.

[vadholovin]

if you click on the icon in the button and nothing happens, then add css property 'pointer-events: none' for this one.

[alexljamin]

@vadholovin Just wondering, how is it working for you with pointer-events: none? Perhaps you can share a gist or a codepen.

[alesvojta]

@alljamin [data-micromodal-close] * { pointer-events: none; }

[alexljamin]

@alesvojta May be I am missing something but if you are restricting any type of interaction on any element inside the button, then you cannot open the modal until you trigger the close with .close() method.

[alesvojta]

@alljamin Well, you are right by saying that it restricts any type of interaction on any element inside the button. But the button itself and only itself should trigger the event, the point is that the elements inside have different event.target and the close event wont work that way.

https://codepen.io/alesvojta/pen/XWbNrYB

[jkva]

That interferes with event bubbling.
Ideally the entire modal would not be a click target. Instead on initialisation any close triggers are located and get a click handler so that event bubbling on trigger children in honoured.

Alternatively you can use closest to traverse the tree, but that's a potential efficiency hit:

    onClick (event) {
      if (event.target.closest('[' + this.config.closeTrigger + ']')) {
        this.closeModal(event)
      }
    }

using element.querySelectorAll for the close trigger data attribute and setting a click handler on those would still be preferred.

[kevinlandsberg]

I am not happy with the solutions. Anyone has an idea for a better solution maybe with JQuery if it has to be used?

[ghosh]

Should be fixed with #443. Feel free to open, if the issue persists.