[ADF-4933] Adding keydown event on data row to simulate double click when pressing 'enter' key (#5564)

* changing the event on row from keyup to keydown to fix the issue of reopening the file after closing ussing only keyboard (opening and closing the file by enter)

* Reverting the 'onRowKeyDown' to not make a breaking change and added a new method to handle the opening file using 'enter' key

* Added unit test - it should emit double click if keydown "enter key" on row

* Small changes for clean coding
This commit is contained in:
Urse Daniel
2020-03-27 18:33:44 +02:00
committed by GitHub
parent d3ff9eda3f
commit 8f3f5b3879
3 changed files with 38 additions and 7 deletions

View File

@@ -59,6 +59,7 @@
[row]="row"
(select)="onEnterKeyPressed(row, $event)"
(keyup)="onRowKeyUp(row, $event)"
(keydown)="onRowEnterKeyDown(row, $event)"
[adf-upload]="allowDropFiles && rowAllowsDrop(row)"
[adf-upload-data]="row"
[ngStyle]="rowStyle"

View File

@@ -297,6 +297,34 @@ describe('DataTable', () => {
expect(rows[1].getValue('name')).toEqual('test2');
});
it('should double click if keydown "enter key" on row', () => {
const event = new KeyboardEvent('keydown', {
code: 'Enter',
key: 'Enter'
} as KeyboardEventInit );
const dataRows =
[ { name: 'test1'}, { name: 'test2' } ];
dataTable.data = new ObjectDataTableAdapter([],
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
dataTable.ngAfterViewInit();
const rowElement = document.querySelectorAll('.adf-datatable-body .adf-datatable-row')[0];
spyOn(dataTable.rowDblClick, 'emit');
rowElement.dispatchEvent(event);
expect(dataTable.rowDblClick.emit).toHaveBeenCalled();
});
it('should set custom sort order', () => {
const dataSortObj = new DataSorting('dummyName', 'asc');
const dataRows =

View File

@@ -474,11 +474,17 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.clickObserver.next(dataRowEvent);
}
onRowKeyUp(row: DataRow, e: KeyboardEvent) {
onRowEnterKeyDown(row: DataRow, keyboardEvent: KeyboardEvent) {
if (keyboardEvent.key === 'Enter') {
this.onKeyboardNavigate(row, keyboardEvent);
}
}
onRowKeyUp(row: DataRow, keyboardEvent: KeyboardEvent) {
const event = new CustomEvent('row-keyup', {
detail: {
row: row,
keyboardEvent: e,
keyboardEvent: keyboardEvent,
sender: this
},
bubbles: true
@@ -487,11 +493,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.elementRef.nativeElement.dispatchEvent(event);
if (event.defaultPrevented) {
e.preventDefault();
} else {
if (e.key === 'Enter') {
this.onKeyboardNavigate(row, e);
}
keyboardEvent.preventDefault();
}
}