[ACS-10324]: checkbox enter key handling (#11271)

* [ACS-10324]: prevents bubbling of enter key

* [ACS-10324]: adds test

* [ACS-10324]: migrates to testUtils instead of direct query use
This commit is contained in:
rmnvch
2025-10-27 10:22:58 +01:00
committed by GitHub
parent 2d68cf9916
commit 6ab54be7d0
2 changed files with 30 additions and 1 deletions
@@ -253,7 +253,9 @@
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
data-adf-datatable-row-checkbox
(change)="onCheckboxChange(row, $event)"
class="adf-checkbox-sr-only">
(keydown.enter)="$event.stopPropagation()"
class="adf-checkbox-sr-only"
>
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
</mat-checkbox>
</label>
@@ -1395,6 +1395,33 @@ describe('DataTable', () => {
expect(rows[1].isSelected).toBeTrue();
});
it('should call stopPropagation on checkbox keydown enter event', () => {
const petRows = [{ pet: 'dog' }, { pet: 'cat' }];
dataTable.multiselect = true;
dataTable.data = new ObjectDataTableAdapter(petRows, [new ObjectDataColumn({ key: 'pet' })]);
dataTable.ngOnChanges({ rows: new SimpleChange(null, petRows, false) });
fixture.detectChanges();
const checkboxElement = testingUtils.getByCSS('[data-adf-datatable-row-checkbox]').nativeElement as HTMLElement;
const enterEvent = new KeyboardEvent('keydown', {
key: 'Enter',
code: 'Enter',
bubbles: true,
cancelable: true
});
const stopPropagationSpy = jasmine.createSpy('stopPropagationSpy');
Object.assign(enterEvent, {
stopPropagation: stopPropagationSpy
});
checkboxElement.dispatchEvent(enterEvent);
expect(stopPropagationSpy).toHaveBeenCalled();
});
it('should be able to display column of type boolean', () => {
dataTable.data = new ObjectDataTableAdapter(mockCarsData, mockCarsSchemaDefinition);