fix(button): click on mobile phones in Polymer < 2.8.0 (fixes #19)

ing-bank · Jul 11, 2019 · 604a4d4 · 604a4d4
1 parent f6c5615
commit 604a4d4
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
@@ -155,7 +155,7 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
 
   __clickDelegationHandler(e) {
     e.stopPropagation(); // prevent click on the fake element and cause click on the native button
-    this.$$slot('_button').click();
+    this.__dispatchClickOnNativeButton();
   }
 
   __setupDelegation() {
@@ -181,10 +181,16 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
     if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
       e.preventDefault();
       this.shadowRoot.querySelector('.btn').removeAttribute('active');
-      this.$$slot('_button').click();
+      this.__dispatchClickOnNativeButton();
     }
   }
 
+  __dispatchClickOnNativeButton() {
+    this.$$slot('_button').dispatchEvent(
+      new MouseEvent('click', { bubbles: true, composed: true }),
+    );
+  }
+
   __onDisabledChanged() {
     if (this.disabled) {
       this.__originalTabIndex = this.tabindex;