mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -59,6 +59,7 @@
|
|||||||
[row]="row"
|
[row]="row"
|
||||||
(select)="onEnterKeyPressed(row, $event)"
|
(select)="onEnterKeyPressed(row, $event)"
|
||||||
(keyup)="onRowKeyUp(row, $event)"
|
(keyup)="onRowKeyUp(row, $event)"
|
||||||
|
(keydown)="onRowEnterKeyDown(row, $event)"
|
||||||
[adf-upload]="allowDropFiles && rowAllowsDrop(row)"
|
[adf-upload]="allowDropFiles && rowAllowsDrop(row)"
|
||||||
[adf-upload-data]="row"
|
[adf-upload-data]="row"
|
||||||
[ngStyle]="rowStyle"
|
[ngStyle]="rowStyle"
|
||||||
|
@@ -297,6 +297,34 @@ describe('DataTable', () => {
|
|||||||
expect(rows[1].getValue('name')).toEqual('test2');
|
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', () => {
|
it('should set custom sort order', () => {
|
||||||
const dataSortObj = new DataSorting('dummyName', 'asc');
|
const dataSortObj = new DataSorting('dummyName', 'asc');
|
||||||
const dataRows =
|
const dataRows =
|
||||||
|
@@ -474,11 +474,17 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
|||||||
this.clickObserver.next(dataRowEvent);
|
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', {
|
const event = new CustomEvent('row-keyup', {
|
||||||
detail: {
|
detail: {
|
||||||
row: row,
|
row: row,
|
||||||
keyboardEvent: e,
|
keyboardEvent: keyboardEvent,
|
||||||
sender: this
|
sender: this
|
||||||
},
|
},
|
||||||
bubbles: true
|
bubbles: true
|
||||||
@@ -487,11 +493,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
|||||||
this.elementRef.nativeElement.dispatchEvent(event);
|
this.elementRef.nativeElement.dispatchEvent(event);
|
||||||
|
|
||||||
if (event.defaultPrevented) {
|
if (event.defaultPrevented) {
|
||||||
e.preventDefault();
|
keyboardEvent.preventDefault();
|
||||||
} else {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
this.onKeyboardNavigate(row, e);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user