Fix not clickable button with svg in Safari (#1985)

* Fix not clickable button with svg in Safari * Update changelog
elastic · Jun 3, 2019 · 5e2a5fa · 5e2a5fa
1 parent 771830d
commit 5e2a5fa
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - Fixed type mismatch between PropType and TypeScript def for `EuiGlobalToastList` toast `title` ([#1978](https://github.com/elastic/eui/pull/1978))
 - Fixed missing Typescript definition for `EuiButton`'s `color="text"` option ([#1980](https://github.com/elastic/eui/pull/1980))
 - Fixed Prettier formatting lint error in `EuiTable` TS def file ([#1986](https://github.com/elastic/eui/pull/1986))
+- Fixed not clickable button with svg in Safari ([#1985](https://github.com/elastic/eui/pull/1985))
 
 ## [`11.2.1`](https://github.com/elastic/eui/tree/v11.2.1)
 

diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
@@ -11,6 +11,12 @@
   padding: $euiSizeXS;
   border-radius: $euiBorderRadius;
 
+  & > svg {
+    // prevents the element and its children from receiving any pointer events to fix not bubbling click event in Safari
+    // https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element
+    pointer-events: none;
+  }
+
   &:disabled {
     color: $euiButtonColorDisabled;
     pointer-events: none;