Fix not clickable button with svg in Safari

[maryia-lapata]

Summary

This PR is related to this comment elastic/kibana#36896 (review) where an issue was detected: click event sometimes is not fired on a button with svg element in Safari and IE.

At the following screenshot you can noticed that 2nd-5th clicks don't lead to removing of rows:

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[thompsongl]

Thanks!

Add a changelog entry, also

[thompsongl]

If you wouldn't mind, add a comment here so it's clear why we have it.

[cchaos]

Following up on @thompsongl 's comment. Can you also point to documentation somewhere online that shows what the bug in Safari is and how this fixes it?

[maryia-lapata]

@cchaos here links to issues with similar cases, where the applied solution is described:

• SVG click events not firing/bubbling when using element
• Click event is not firing on click on svg > use > path
• Click events are swallowed by SVG elements in IE

[cchaos]

Ahh I see, it's an issue particular to using <use> within the <svg> tag. We have a problem where Sketch likes to export our icons using this syntax

But there are ways to avoid this and I try to do so when I'm exporting SVG's.

@snide & @ryankeairns This issue feels like it should be solved in the SVG's themselves and not with this generic selector though it also feels like it might be good to have as a backup. Thoughts?

I do think we should really go through and cleanup any <defs> and <use> usages, but should we keep this in as well?

[cchaos]

Ok, I made a follow-up issue to resolve in the icons themselves. #1989 Thanks for adding the comment @maryia-lapata

[snide]

Makes sense to do both.

…

On Mon, Jun 3, 2019, 8:17 AM Caroline Horn ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/components/button/button_icon/_button_icon.scss <#1985 (comment)>: > @@ -11,6 +11,10 @@ padding: $euiSizeXS; border-radius: $euiBorderRadius; + & > svg { Ahh I see, it's an issue particular to using <use> within the <svg> tag. We have a problem where Sketch likes to export our icons using this syntax [image: Screen Shot 2019-06-03 at 11 13 18 AM] <https://user-images.githubusercontent.com/549577/58812909-be212800-85f0-11e9-9f24-18fad9739031.png> But there are ways to avoid this and I try to do so when I'm exporting SVG's. @snide <https://github.com/snide> & @ryankeairns <https://github.com/ryankeairns> This issue feels like it should be solved in the SVG's themselves and not with this generic selector though it also feels like it might be good to have as a backup. Thoughts? I do think we should really go through and cleanup any <defs> and <use> usages, but should we keep this in as well? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1985?email_source=notifications&email_token=AACPHJ3XTQ7DZFVR6BI63MTPYUYYHA5CNFSM4HRWVNR2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOB2MZWPY#discussion_r289897585>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACPHJ3ZARG6FRWCOVRHPMLPYUYYHANCNFSM4HRWVNRQ> .