inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* AAE-28655 Fix for datatable not scrolling back up after paginations
This commit is contained in:
Alex Molodyh 2025-02-06 13:04:37 -08:00 committed by GitHub
parent e5281e7ff0
commit 265c8e8a56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@ -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>

38
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@ -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', () => {