fix(Grid): Fixed duplicate ghosts in MRL (#14500)

Author: MarielaTihova

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

@@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ViewChild, Component } from '@angular/core';
+import { ViewChild, Component, DebugElement } from '@angular/core';
 import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
@@ -30,6 +30,7 @@ interface ColGroupsType {
 describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
     let fixture: ComponentFixture<FixtureType>;
     let grid: IgxGridComponent;
+    const COLUMN_HEADER_CLASS = '.igx-grid-th';
     configureTestSuite((() => {
         return TestBed.configureTestingModule({
             imports: [
@@ -900,6 +901,30 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => {
             expect((grid.verticalScrollContainer.getScroll().children[0] as HTMLElement).offsetHeight -
                 grid.verticalScrollContainer.getScroll().offsetHeight).toBeLessThanOrEqual(0);
         });
+
+        it('should create only one ghost element when dragging a column', async () => {
+            const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+            
+            const header = headers[1].nativeElement;
+            UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50);
+            await wait();
+            fixture.detectChanges();
+
+            UIInteractions.simulatePointerEvent('pointermove', header, 56, 56);
+            await wait(50);
+            fixture.detectChanges();
+
+            UIInteractions.simulatePointerEvent('pointermove', header, 230, 30);
+            await wait();
+            fixture.detectChanges();
+
+            const ghost = fixture.debugElement.queryAll(By.css('.igx-grid__drag-ghost-image'));
+            expect(ghost.length).toEqual(1);
+
+            UIInteractions.simulatePointerEvent('pointerup', header, 230, 30);
+            await wait();
+            fixture.detectChanges();
+        });
     });
 
     describe('Resizing', () => {
@@ -1339,6 +1364,19 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo
         { field: 'Country', rowStart: 2, colStart: 2, groupable: true },
         { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 }
     ];
+
+    public override colGroups: ColGroupsType[] = [
+        {
+            group: 'group1',
+            pinned: true,
+            columns: this.cols2
+        },
+        {
+            group: 'group2',
+            pinned: false,
+            columns: this.cols1
+        }
+    ];
 }
 @Component({
     template: `

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -11,11 +11,7 @@
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"
                 [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
-                [column]="child"
-                [igxColumnMovingDrag]="child"
-                [ghostHost]="grid.outlet.nativeElement"
-                [attr.droppable]="true"
-                [igxColumnMovingDrop]="child">
+                [column]="child">
             </igx-grid-header-group>
         </ng-container>
     </div>