fix(action-strip): Hide action strip on mouse leave event of row (#12204)

* fix(action-strip): Hide action strip on mouse leave event of row

* fix(action-strip): Fix added test that checks auto-hide on the mouse leave event

* fix(action-strip): Boolean to hide or not the action strip if it is a menu

* fix(action-strip): Fix closing curly brace

* fix(action-strip): Fix test for hide on mouse leave and add one for boolean flag

* fix(action-strip): Change boolean getter logic

Co-authored-by: Deyan Kamburov <[email protected]>
Co-authored-by: Teodosia Hristodorova <[email protected]>
Co-authored-by: Martin Dragnev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 6 people

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

@@ -134,6 +134,24 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         return this._resourceStrings;
     }
 
+    /**
+     * Hide or not the Action Strip based on if it is a menu.
+     * 
+     * @hidden
+     * @internal
+     */
+     public get hideOnRowLeave(): boolean{
+        if(this.menu.items.length === 0){
+            return true;
+        }else if(this.menu.items.length > 0){
+            if(this.menu.collapsed){
+                return true;
+            }else{
+                return false;
+            }
+        }
+    }
+
     /**
      * Reference to the menu
      *

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

@@ -29,7 +29,9 @@ describe('igxGridEditingActions #grid ', () => {
                 IgxActionStripPinEditComponent,
                 IgxActionStripEditMenuComponent,
                 IgxHierarchicalGridActionStripComponent,
-                IgxTreeGridEditActionsComponent
+                IgxTreeGridEditActionsComponent,
+                IgxActionStripOneRowComponent,
+                IgxActionStripMenuOneRowComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -153,6 +155,28 @@ describe('igxGridEditingActions #grid ', () => {
 
             expect(grid.rowList.first.data['ID']).toBe('ANATR');
         });
+        it('should not auto-hide on mouse leave of row if action strip is menu', () => {
+            fixture = TestBed.createComponent(IgxActionStripMenuOneRowComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            grid = fixture.componentInstance.grid;
+
+            const row = grid.getRowByIndex(0);
+            row.pin();
+            const rowElem = grid.pinnedRows[0];
+            row.unpin();
+
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            actionStrip.menu.open();
+            fixture.detectChanges();
+                
+            UIInteractions.simulateMouseEvent('mouseleave', rowElem.element.nativeElement, 0, 200);
+            fixture.detectChanges();
+                
+            expect(actionStrip.hidden).toBeFalse();
+        });
     });
 
     describe('integration with pinning actions ', () => {
@@ -191,6 +215,25 @@ describe('igxGridEditingActions #grid ', () => {
             expect(actionStrip.context).toBe(row);
             expect(actionStrip.hidden).toBeFalse();
         });
+        it('should auto-hide on mouse leave of row.', async () => {
+            fixture = TestBed.createComponent(IgxActionStripOneRowComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            grid = fixture.componentInstance.grid;
+            
+            const row = grid.getRowByIndex(0);
+            row.pin();
+            const rowElem = grid.pinnedRows[0];
+            
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeFalse();
+            UIInteractions.simulateMouseEvent('mouseleave', rowElem.element.nativeElement, 0, 200);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeTrue();
+        });
         it('should auto-hide on mouse leave of grid.', () => {
             const row = grid.getRowByIndex(0);
             actionStrip.show(row);
@@ -329,6 +372,7 @@ class IgxActionStripTestingComponent implements OnInit {
     public grid: IgxGridComponent;
 
     private data: any[];
+    private dataOneRow: any[];
     private columns: any[];
 
     public ngOnInit() {
@@ -377,6 +421,10 @@ class IgxActionStripTestingComponent implements OnInit {
             { ID: 'FRANS', CompanyName: 'Franchi S.p.A.', ContactName: 'Paolo Accorti', ContactTitle: 'Sales Representative', Address: 'Via Monte Bianco 34', City: 'Torino', Region: null, PostalCode: '10100', Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' }
         ];
         /* eslint-enable max-len */
+
+        this.dataOneRow = [
+            { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders', ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209', Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' },
+        ];
     }
 }
 
@@ -414,3 +462,38 @@ class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent {
 })
 class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent {
 }
+
+@Component({
+    template: `
+<igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
+    [rowEditable]="true" [primaryKey]="'ID'">
+    <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+        [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
+    </igx-column>
+
+    <igx-action-strip #actionStrip>
+        <igx-grid-pinning-actions></igx-grid-pinning-actions>
+        <igx-grid-editing-actions></igx-grid-editing-actions>
+    </igx-action-strip>
+</igx-grid>
+`
+})
+class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent {
+}
+
+@Component({
+    template: `
+<igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
+    [rowEditable]="true" [primaryKey]="'ID'">
+    <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+        [width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
+    </igx-column>
+
+    <igx-action-strip #actionStrip>
+        <igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>
+    </igx-action-strip>
+</igx-grid>
+`
+})
+class IgxActionStripMenuOneRowComponent extends IgxActionStripTestingComponent {
+}

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -413,6 +413,17 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('mouseleave')
+    public hideActionStrip() {
+        if (this.grid.actionStrip && this.grid.actionStrip.hideOnRowLeave) {
+            this.grid.actionStrip.hide();
+        }
+    }
+
     /**
      * @hidden
      * @internal