Fixed click listener on button

TAMULib · May 13, 2021 · 284a87b · 284a87b
1 parent d635577
commit 284a87b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.html
@@ -1,5 +1,6 @@
 <button-wrapper #animationRoot>
   <button *ngIf="!href"
+    [attr.id]="htmlId"
     class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-'+themeVariant : ''}}"
     [type]="btnType"
     [ngClass]="{
@@ -12,6 +13,7 @@
     <ng-container *ngTemplateOutlet="content"></ng-container>
   </button>
   <a *ngIf="href"
+    [attr.id]="htmlId"
     class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-'+themeVariant : ''}}"
     [href]="href"
     [ngClass]="{

diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
@@ -12,6 +12,8 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
 })
 export class WvrButtonComponent extends WvrBaseComponent {
 
+  htmlId = `wvr-button-${this.id}`;
+
   /** Used to define the class type for button component.  */
   @Input() themeVariant: ThemeVariantName = 'primary';
 
@@ -138,30 +140,31 @@ export class WvrButtonComponent extends WvrBaseComponent {
     super(injector);
   }
 
-  @HostListener('click', ['$event']) click($event: MouseEvent): void {
-
-    if (this._dispatchActions) {
-      this._dispatchActions.forEach(actionAndProp => {
-        this.store.dispatch(actionAndProp.action(
-          actionAndProp.props
-        ));
-      });
-    } else if (this._action) {
-      this._actionProps ?
-      this.store.dispatch(this._action(
-        this._actionProps
-      )) :
-      this.store.dispatch(this._action());
-    }
-
-    if (this.emitEvent) {
-      this.eRef.nativeElement.dispatchEvent(new CustomEvent(this.emitEvent, {
-        bubbles: true,
-        detail: {
-          data: (this.eRef.nativeElement as HTMLElement).dataset,
-          button: this
-        }
-      }));
+  @HostListener('document:click', ['$event']) click($event: MouseEvent): void {
+    if (($event.target as HTMLElement).id === this.htmlId) {
+      if (this._dispatchActions) {
+        this._dispatchActions.forEach(actionAndProp => {
+          this.store.dispatch(actionAndProp.action(
+            actionAndProp.props
+          ));
+        });
+      } else if (this._action) {
+        this._actionProps ?
+        this.store.dispatch(this._action(
+          this._actionProps
+        )) :
+        this.store.dispatch(this._action());
+      }
+
+      if (this.emitEvent) {
+        this.eRef.nativeElement.dispatchEvent(new CustomEvent(this.emitEvent, {
+          bubbles: true,
+          detail: {
+            data: (this.eRef.nativeElement as HTMLElement).dataset,
+            button: this
+          }
+        }));
+      }
     }
   }