[ADF-709] add autofocus when a new row is added on dynamic table widget (#1927)

* [ADF-709] add autofocus when a new row is added on dynamic table widget

* [ADF-709] removed wrong reference for template

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.html

@@ -38,6 +38,7 @@
                 <i class="material-icons">arrow_downward</i>
             </button>
             <button class="mdl-button mdl-js-button mdl-button--icon"
+                    id="{{content.id}}-add-row"
                     (click)="addNewRow()">
                 <i class="material-icons">add_circle_outline</i>
             </button>

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.spec.ts

@@ -86,7 +86,12 @@ describe('DynamicTableWidget', () => {
         const field = new FormFieldModel(new FormModel());
         table = new DynamicTableModel(field);
         visibilityService = new WidgetVisibilityService(null, logService);
-        widget = new DynamicTableWidget(null, visibilityService, logService);
+        let changeDetectorSpy = jasmine.createSpyObj('cd', ['detectChanges']);
+        let nativeElementSpy = jasmine.createSpyObj('nativeElement', ['querySelector']);
+        changeDetectorSpy.nativeElement = nativeElementSpy;
+        let elementRefSpy = jasmine.createSpyObj('elementRef', ['']);
+        elementRefSpy.nativeElement = nativeElementSpy;
+        widget = new DynamicTableWidget(elementRefSpy, visibilityService, logService, changeDetectorSpy);
         widget.content = table;
     });
 
@@ -334,11 +339,6 @@ describe('DynamicTableWidget', () => {
             window['componentHandler'] = componentHandler;
         }));
 
-        afterEach(() => {
-            fixture.destroy();
-            TestBed.resetTestingModule();
-        });
-
         beforeEach(() => {
             dynamicTableWidget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), fakeFormField);
             dynamicTableWidget.field.type = FormFieldTypes.DYNAMIC_TABLE;
@@ -346,6 +346,11 @@ describe('DynamicTableWidget', () => {
             fixture.detectChanges();
         });
 
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
         it('should select a row when press space bar', async(() => {
             let rowElement = element.querySelector('#fake-dynamic-table-row-0');
 
@@ -363,5 +368,20 @@ describe('DynamicTableWidget', () => {
                 expect(selectedRow.className).toBe('dynamic-table-widget__row-selected');
             });
         }));
+
+        it('should focus on add button when a new row is saved', async(() => {
+            let addNewRowButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#fake-dynamic-table-add-row');
+
+            expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
+            expect(addNewRowButton).not.toBeNull();
+
+            dynamicTableWidget.addNewRow();
+            dynamicTableWidget.onSaveChanges();
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(document.activeElement.id).toBe('fake-dynamic-table-add-row');
+            });
+        }));
     });
 });

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, OnInit, Input } from '@angular/core';
+import { Component, ElementRef, OnInit, Input, ChangeDetectorRef } from '@angular/core';
 import { LogService } from 'ng2-alfresco-core';
 import { WidgetComponent } from './../widget.component';
 import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './dynamic-table.widget.model';
@@ -46,7 +46,8 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
 
     constructor(private elementRef: ElementRef,
                 private visibilityService: WidgetVisibilityService,
-                private logService: LogService) {
+                private logService: LogService,
+                private cd: ChangeDetectorRef) {
         super();
     }
 
@@ -57,6 +58,20 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
         }
     }
 
+    forceFocusOnAddButton() {
+        if (this.content) {
+            this.cd.detectChanges();
+            let buttonAddRow = <HTMLButtonElement>this.elementRef.nativeElement.querySelector('#' + this.content.id + '-add-row');
+            if (this.isDynamicTableReady(buttonAddRow)) {
+                buttonAddRow.focus();
+            }
+        }
+    }
+
+    private isDynamicTableReady(buttonAddRow) {
+        return this.field && !this.editMode && buttonAddRow;
+    }
+
     isValid() {
         let result = true;
 
@@ -159,11 +174,13 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
             this.logService.error(this.ERROR_MODEL_NOT_FOUND);
         }
         this.editMode = false;
+        this.forceFocusOnAddButton();
     }
 
     onCancelChanges() {
         this.editMode = false;
         this.editRow = null;
+        this.forceFocusOnAddButton();
     }
 
     copyRow(row: DynamicTableRow): DynamicTableRow {