AAE-28655 Fix for datatable not scrolling back up after paginations (#10605)

* AAE-28655 Fix for datatable not scrolling back up after paginations

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -174,12 +174,13 @@
     </div>
 
     <div
+        *ngIf="!loading; else loadingRowTemplate"
         class="adf-datatable-body"
         [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
         cdkDropList
         [cdkDropListDisabled]="!enableDragRows"
         role="rowgroup">
-        <ng-container *ngIf="!loading && !noPermission">
+        <ng-container *ngIf="!noPermission; else noPermissionsRowTemplate">
             <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
                 cdkDrag
                 [cdkDragDisabled]="!enableDragRows"
@@ -439,7 +440,9 @@
                 </div>
             </div>
         </ng-container>
-        <div *ngIf="!loading && noPermission"
+
+        <ng-template #noPermissionsRowTemplate>
+            <div
                 role="row"
                 class="adf-datatable-row adf-no-permission__row">
                 <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
@@ -449,7 +452,10 @@
                     </ng-template>
                 </div>
             </div>
-        <div *ngIf="loading" class="adf-datatable-row">
+        </ng-template>
+    </div>
+    <ng-template #loadingRowTemplate>
+        <div class="adf-datatable-row">
             <div class="adf-no-content-container adf-datatable-cell">
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"
@@ -457,5 +463,5 @@
                 </ng-template>
             </div>
         </div>
-    </div>
+    </ng-template>
 </div>

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -1468,6 +1468,44 @@ describe('DataTable', () => {
             expect(await testingUtils.checkIfMatCheckboxesHaveClass('adf-datatable-hover-only')).toBeTrue();
         });
     });
+
+    it('should scroll back to the top when new data is set', async () => {
+        const columnDefinitions = [
+            {
+                type: 'text',
+                key: 'id',
+                title: ''
+            },
+            {
+                type: 'text',
+                key: 'name',
+                title: 'Name'
+            }
+        ] as DataColumn[];
+        const initialRows = Array.from({ length: 20 }, (_, i) => ({ id: `${i + 1}`, name: `Row ${i + 1}` }));
+        const nextRows = Array.from({ length: 20 }, (_, i) => ({ id: `${i + 21}`, name: `Row ${i + 21}` }));
+
+        // Load first 20 records
+        dataTable.data = new ObjectDataTableAdapter(initialRows, columnDefinitions);
+        fixture.detectChanges();
+
+        // Check that scroll body height > 0
+        const scrollBody = fixture.nativeElement.querySelector('.adf-datatable-body');
+        expect(scrollBody.scrollHeight).toBeGreaterThan(0);
+
+        // Scroll to bottom
+        scrollBody.scrollTop = scrollBody.scrollHeight;
+        scrollBody.dispatchEvent(new Event('scroll'));
+        fixture.detectChanges();
+
+        // Set new records
+        dataTable.data = new ObjectDataTableAdapter(nextRows, columnDefinitions);
+        fixture.detectChanges();
+
+        // Verify new records are loaded and first record is at top
+        expect(scrollBody.scrollTop).toBe(0);
+        expect(testingUtils.getInnerTextByDataAutomationId('text_Row 21')).toContain('Row 21');
+    });
 });
 
 describe('Accesibility', () => {