Fix close button target when using SVG as inner content

[mtscarvalho]

When some SVG tag is added inside the close button tag, the action of closing the modal doesn't work. This PR aims to fix that problem.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
micromodal	❌ Failed (Inspect)		Oct 6, 2022 at 4:05PM (UTC)

[kalpeshsingh]

Hello @mtscarvalho 👋
Thanks for spotting a bug and sending a PR to fix it.

Wondering why do you need to explicitly use pointer-events? The default auto should work?

[mtscarvalho]

Hello, @kalpeshsingh ! 👋

When you click on the SVG, the event target is no longer the button element, but the path inside the SVG or the svg element itself. As a consequence, the event target fails and the closing action does not happen.

A way to fix that is disabling the event fires on SVG. There 2 ways about how to do that:

• Assigning the pointer-events as none to SVG
• Assigning the pointer-events as all for the parent element, in this case the button.

The auto value should work for all cases with the exception of SVG.

[mtscarvalho]

Hello @kalpeshsingh!

What do you think of this fix? It's my first interaction and PR with an open-source project. Please, let me know if I did something wrong or if you have some suggestions.

[kalpeshsingh]

Hello @mtscarvalho I will let @ghosh make a decision here.