raise keyboard events, improve task list keyboard handling (#2401)

docs/datatable.component.md

@@ -169,6 +169,7 @@ These events bubble up the component tree and can be handled by any parent compo
 | row-dblclick | Raised when user double-clicks a row |
 | row-select | Raised after user selects a row |
 | row-unselect | Raised after user unselects a row |
+| row-keyup | Raised on the 'keyup' event for the focused row.  |
 
 For example:
 
@@ -288,6 +289,18 @@ Note: the `<loading-content-template>` and `<no-content-template>` can be used t
 
 ### Events
 
+#### row-keyup DOM event
+
+Raised on the 'keyup' event for the focused row. 
+
+This is an instance of the `CustomEvent` with the `details` property containing the following object:
+
+```ts
+row: DataRow,
+keyboardEvent: KeyboardEvent,
+sender: any
+```
+
 #### rowClick event
 
 Emitted when user clicks a row.

ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.html

@@ -8,7 +8,8 @@
             [selectionMode]="selectionMode"
             (row-select)="onRowSelect($event)"
             (row-unselect)="onRowUnselect($event)"
-            (rowClick)="onRowClick($event)">
+            (rowClick)="onRowClick($event)"
+            (row-keyup)="onRowKeyUp($event)">
             <loading-content-template>
                 <ng-template>
                     <!--Add your custom loading template here-->

ng2-components/ng2-activiti-tasklist/src/components/tasklist.component.ts

@@ -270,12 +270,7 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
             (this.data && this.data.getRows() && this.data.getRows().length === 0);
     }
 
-    /**
+    onRowClick(item: DataRowEvent) {
-     * Emit the event rowClick passing the current task id when the row is clicked
-     * @param event
-     */
-    onRowClick(event: DataRowEvent) {
-        const item = event;
         this.currentInstanceId = item.value.getValue('id');
         this.rowClick.emit(this.currentInstanceId);
     }
@@ -290,6 +285,14 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
         this.rowsSelected.emit(this.selectedInstances);
     }
 
+    onRowKeyUp(event: CustomEvent) {
+        if (event.detail.keyboardEvent.key === 'Enter') {
+            event.preventDefault();
+            this.currentInstanceId = event.detail.row.getValue('id');
+            this.rowClick.emit(this.currentInstanceId);
+        }
+    }
+
     /**
      * Optimize name field
      * @param istances

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -42,7 +42,7 @@
             [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
             [ngStyle]="rowStyle"
             [ngClass]="getRowStyle(row)"
-            (keyup.enter)="onKeyboardNavigate(row, $event)">
+            (keyup)="onRowKeyUp(row, $event)">
 
             <!-- Actions (left) -->
             <td *ngIf="actions && actionsPosition === 'left'">

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -73,19 +73,19 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     showHeader: boolean = true;
 
     @Output()
-    rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
+    rowClick = new EventEmitter<DataRowEvent>();
 
     @Output()
-    rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
+    rowDblClick = new EventEmitter<DataRowEvent>();
 
     @Output()
-    showRowContextMenu: EventEmitter<DataCellEvent> = new EventEmitter<DataCellEvent>();
+    showRowContextMenu = new EventEmitter<DataCellEvent>();
 
     @Output()
-    showRowActionsMenu: EventEmitter<DataCellEvent> = new EventEmitter<DataCellEvent>();
+    showRowActionsMenu = new EventEmitter<DataCellEvent>();
 
     @Output()
-    executeRowAction: EventEmitter<DataRowActionEvent> = new EventEmitter<DataRowActionEvent>();
+    executeRowAction = new EventEmitter<DataRowActionEvent>();
 
     @Input()
     loading: boolean = false;
@@ -282,10 +282,32 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         this.clickObserver.next(dataRowEvent);
     }
 
-    onKeyboardNavigate(row: DataRow, e: KeyboardEvent) {
+    onRowKeyUp(row: DataRow, e: KeyboardEvent) {
+        const event = new CustomEvent('row-keyup', {
+            detail: {
+                row: row,
+                keyboardEvent: e,
+                sender: this
+            },
+            bubbles: true
+        });
+
+        this.elementRef.nativeElement.dispatchEvent(event);
+
+        if (event.defaultPrevented) {
+            e.preventDefault();
+        } else {
+            if (e.key === 'Enter') {
+                this.onKeyboardNavigate(row, e);
+            }
+        }
+    }
+
+    private onKeyboardNavigate(row: DataRow, e: KeyboardEvent) {
         if (e) {
             e.preventDefault();
         }
+
         const event = new DataRowEvent(row, e, this);
 
         this.rowDblClick.emit(event);