chore(action-strip): stop propagating click event

Author: dkamburov

projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

@@ -2,7 +2,7 @@
     <ng-content #content></ng-content>
     <ng-container *ngIf="menuItems.length > 0">
         <button igxButton="icon" igxRipple [igxToggleAction]="dropdown"
-            [overlaySettings]="menuOverlaySettings"
+            [overlaySettings]="menuOverlaySettings" (click)="$event.stopPropagation()"
             [igxDropDownItemNavigation]="dropdown">
             <igx-icon>more_vert</igx-icon>
         </button>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="isRowContext">
-    <button igxButton="icon" [disabled]="disabled" igxRipple (click)="startEdit()">
+    <button igxButton="icon" [disabled]="disabled" igxRipple (click)="startEdit($event)">
         <igx-icon>edit</igx-icon>
     </button>
-    <button igxButton="icon" [disabled]="disabled" class="igx-action-strip__delete" igxRipple (click)="deleteRow()">
+    <button igxButton="icon" [disabled]="disabled" class="igx-action-strip__delete" igxRipple (click)="deleteRow($event)">
         <igx-icon >delete</igx-icon>
     </button>
 </ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -23,7 +23,10 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
      * this.gridEditingActions.startEdit();
      * ```
      */
-    public startEdit(): void {
+    public startEdit(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
         if (!this.isRow(this.strip.context)) {
             return;
         }
@@ -43,7 +46,10 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
      * this.gridEditingActions.deleteRow();
      * ```
      */
-    public deleteRow(): void {
+    public deleteRow(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
         if (!this.isRow(this.strip.context)) {
             return;
         }

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="isRowContext">
-    <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin()">
+    <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
         <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
     </button>
-    <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin()">
+    <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin($event)">
         <igx-icon fontSet="filtering-icons" name="unpin"></igx-icon>
     </button>
 </ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

@@ -42,7 +42,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
      * this.gridPinningActions.pin();
      * ```
      */
-    public pin(): void {
+    public pin(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
         if (!this.isRow(this.strip.context)) {
             return;
         }
@@ -58,7 +61,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
      * this.gridPinningActions.unpin();
      * ```
      */
-    public unpin(): void {
+    public unpin(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
         if (!this.isRow(this.strip.context)) {
             return;
         }

src/app/action-strip/action-strip.sample.html

@@ -51,7 +51,7 @@ <h5>Grid Pinning Action</h5>
         <article>
             <div class="sample-column">
                 <h5>Grid Pinning and Editing Actions</h5>
-                <igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'"
+                <igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
                     [rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
                     (mouseleave)="onMouseLeave(actionstrip2)">
                     <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
@@ -74,7 +74,7 @@ <h5>Grid Pinning and Editing Actions</h5>
         <article>
             <div class="sample-column">
                 <h5>Actions in menu</h5>
-                <igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'"
+                <igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
                     [rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
                     (mouseleave)="onMouseLeave(actionstrip3, $event)"
                     (mouseover)="onMouseOver($event, grid3, actionstrip3)">