[AAE-5872] - Viewer responds as we type in the form fields. Apply the… (#7298)

* [AAE-5872] - Viewer responds as we type in the form fields. Apply the fix on start process also

* Remove comments

Co-authored-by: Ardit Domi <arditdomi@apl-c02g64vpmd6t.home>

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -52,6 +52,7 @@ import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CloudFormRenderingService } from './cloud-form-rendering.service';
 import { Node } from '@alfresco/js-api';
+import { ESCAPE } from '@angular/cdk/keycodes';
 
 const mockOauth2Auth: any = {
     oauth2Auth: {
@@ -1221,4 +1222,11 @@ describe('retrieve metadata on submit', () => {
         expect(formDataRefreshed).not.toHaveBeenCalled();
         expect(formContentClicked).toHaveBeenCalledWith(contentLinkModel);
     });
+
+    it('should cancel bubbling a keydown event', () => {
+        const escapeKeyboardEvent = new KeyboardEvent('keydown', { 'keyCode': ESCAPE } as any);
+        fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
+
+        expect(escapeKeyboardEvent.cancelBubble).toBe(true);
+    });
 });

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -17,7 +17,7 @@
 
 import {
     Component, EventEmitter, Input, OnChanges,
-    Output, SimpleChanges, OnDestroy
+    Output, SimpleChanges, OnDestroy, HostListener
 } from '@angular/core';
 import { Observable, of, forkJoin, Subject, Subscription } from 'rxjs';
 import { switchMap, takeUntil, map } from 'rxjs/operators';
@@ -127,6 +127,11 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             });
     }
 
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        event.cancelBubble = true;
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
 

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -43,6 +43,7 @@ import { ProcessServiceCloudTestingModule } from '../../../testing/process-servi
 import { TranslateModule } from '@ngx-translate/core';
 import { ProcessNameCloudPipe } from '../../../pipes/process-name-cloud.pipe';
 import { ProcessInstanceCloud } from '../models/process-instance-cloud.model';
+import { ESCAPE } from '@angular/cdk/keycodes';
 
 describe('StartProcessCloudComponent', () => {
 
@@ -825,5 +826,12 @@ describe('StartProcessCloudComponent', () => {
             expect(component.processInstanceName.touched).toBe(true);
             expect(component.processInstanceName.value).toEqual('fake-transformed-name');
         });
+
+        it('should cancel bubbling a keydown event ()', () => {
+            const escapeKeyboardEvent = new KeyboardEvent('keydown', { 'keyCode': ESCAPE } as any);
+            fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
+
+            expect(escapeKeyboardEvent.cancelBubble).toBe(true);
+        });
     });
 });

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts

@@ -17,7 +17,7 @@
 
 import {
     Component, EventEmitter, Input, OnChanges, OnInit,
-    Output, SimpleChanges, ViewChild, ViewEncapsulation, OnDestroy
+    Output, SimpleChanges, ViewChild, ViewEncapsulation, OnDestroy, HostListener
 } from '@angular/core';
 
 import { ProcessInstanceCloud } from '../models/process-instance-cloud.model';
@@ -157,6 +157,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
         }
     }
 
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent) {
+        event.cancelBubble = true;
+    }
+
     hasForm(): boolean {
         return this.processDefinitionCurrent && !!this.processDefinitionCurrent.formKey;
     }

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts

@@ -25,7 +25,6 @@ import { TaskFormCloudComponent } from './task-form-cloud.component';
 import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model';
 import { TaskCloudService } from '../../services/task-cloud.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { ESCAPE } from '@angular/cdk/keycodes';
 
 const taskDetails: TaskDetailsCloudModel = {
     appName: 'simple-app',
@@ -457,12 +456,4 @@ describe('TaskFormCloudComponent', () => {
 
         expect(noFormTemplateTitle).toBeNull();
     });
-
-    // For widgets like File Viewer bubbling the keydown events of the form needs to be cancelled
-    it('should cancel bubbling a keydown event ()', () => {
-        const escapeKeyboardEvent = new KeyboardEvent('keydown', { 'keyCode': ESCAPE } as any);
-        fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
-
-        expect(escapeKeyboardEvent.cancelBubble).toBe(true);
-    });
 });

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts

@@ -17,7 +17,7 @@
 
 import {
     Component, EventEmitter, Input, OnChanges,
-    Output, SimpleChanges, OnInit, HostListener, ViewEncapsulation
+    Output, SimpleChanges, OnInit, ViewEncapsulation
 } from '@angular/core';
 import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model';
 import { TaskCloudService } from '../../services/task-cloud.service';
@@ -113,11 +113,6 @@ export class TaskFormCloudComponent implements OnInit, OnChanges {
         this.formRenderingService.setComponentTypeResolver('date', () => DateCloudWidgetComponent, true);
     }
 
-    @HostListener('keydown', ['$event'])
-    onKeyDown(event: KeyboardEvent) {
-        event.cancelBubble = true;
-    }
-
     ngOnInit() {
         if (this.appName === '' && this.taskId) {
             this.loadTask();