diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index d7376cc890..b93eb22b43 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/lib/core/datatable/components/datatable/datatable.component.html @@ -85,6 +85,7 @@ [attr.filename]="getFilename(row)" tabindex="0" (click)="onRowClick(row, $event)" + (keydown.enter)="onEnterKeyPressed(row, $event)" [context-menu]="getContextMenuActions(row, col)" [context-menu-enabled]="contextMenu">
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index b24e8798e4..e3c32619ac 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -234,6 +234,50 @@ describe('DataTable', () => { expect(rows[1].isSelected).toBeTruthy(); }); + it('should select only one row with [single] selection mode pressing enter key', () => { + dataTable.selectionMode = 'single'; + dataTable.data = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [ new ObjectDataColumn({ key: 'name'}) ] + ); + const rows = dataTable.data.getRows(); + + dataTable.ngOnChanges({}); + dataTable.onEnterKeyPressed(rows[0], null); + expect(rows[0].isSelected).toBeTruthy(); + expect(rows[1].isSelected).toBeFalsy(); + + dataTable.onEnterKeyPressed(rows[1], null); + expect(rows[0].isSelected).toBeFalsy(); + expect(rows[1].isSelected).toBeTruthy(); + }); + + it('should select multiple rows with [multiple] selection mode pressing enter key', () => { + dataTable.selectionMode = 'multiple'; + dataTable.data = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [ new ObjectDataColumn({ key: 'name'}) ] + ); + const rows = dataTable.data.getRows(); + + const event = new KeyboardEvent('enter', { + metaKey: true + }); + + dataTable.ngOnChanges({}); + dataTable.onEnterKeyPressed(rows[0], event); + dataTable.onEnterKeyPressed(rows[1], event); + + expect(rows[0].isSelected).toBeTruthy(); + expect(rows[1].isSelected).toBeTruthy(); + }); + it('should not unselect the row with [single] selection mode', () => { dataTable.selectionMode = 'single'; dataTable.data = new ObjectDataTableAdapter( diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 08502416b2..77b82304b0 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -292,31 +292,40 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck } if (row) { - if (this.data) { - if (this.isSingleSelectionMode()) { - this.resetSelection(); - this.selectRow(row, true); - this.emitRowSelectionEvent('row-select', row); - } - - if (this.isMultiSelectionMode()) { - const modifier = e && (e.metaKey || e.ctrlKey); - const newValue = modifier ? !row.isSelected : true; - const domEventName = newValue ? 'row-select' : 'row-unselect'; - - if (!modifier) { - this.resetSelection(); - } - this.selectRow(row, newValue); - this.emitRowSelectionEvent(domEventName, row); - } - } - + this.handleRowSelection(row, e); const dataRowEvent = new DataRowEvent(row, e, this); this.clickObserver.next(dataRowEvent); } } + onEnterKeyPressed(row: DataRow, e: KeyboardEvent) { + if (row) { + this.handleRowSelection(row, e); + } + } + + private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) { + if (this.data) { + if (this.isSingleSelectionMode()) { + this.resetSelection(); + this.selectRow(row, true); + this.emitRowSelectionEvent('row-select', row); + } + + if (this.isMultiSelectionMode()) { + const modifier = e && (e.metaKey || e.ctrlKey); + const newValue = modifier ? !row.isSelected : true; + const domEventName = newValue ? 'row-select' : 'row-unselect'; + + if (!modifier) { + this.resetSelection(); + } + this.selectRow(row, newValue); + this.emitRowSelectionEvent(domEventName, row); + } + } + } + resetSelection(): void { if (this.data) { const rows = this.data.getRows();