AAE-12245: Migrated from event cancelBubble to stopPropagation (#8311)

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -36,6 +36,7 @@ import {
 } from '@alfresco/adf-core';
 import { throwError } from 'rxjs';
 import { Component } from '@angular/core';
+import { ESCAPE } from '@angular/cdk/keycodes';
 
 @Component({
     selector: 'adf-viewer-container-toolbar',
@@ -407,6 +408,34 @@ describe('AlfrescoViewerComponent', () => {
             });
 
         });
+
+        it('should stop propagation on sidebar keydown event [keydown]', fakeAsync(() => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+            const escapeKeyboardEvent = new KeyboardEvent('keydown', { key: ESCAPE.toString() });
+            const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
+            customFixture.detectChanges();
+            const viewerSidebarElement = customElement.querySelector('adf-viewer-sidebar');
+
+            viewerSidebarElement.dispatchEvent(escapeKeyboardEvent);
+
+            expect(stopPropagationSpy).toHaveBeenCalled();
+        }));
+
+        it('should stop propagation on sidebar keyup event [keyup]', fakeAsync(() => {
+            const customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
+            const customElement: HTMLElement = customFixture.nativeElement;
+            const escapeKeyboardEvent = new KeyboardEvent('keyup', { key: ESCAPE.toString() });
+            const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
+            customFixture.detectChanges();
+            const viewerSidebarElement = customElement.querySelector('adf-viewer-sidebar');
+
+            viewerSidebarElement.dispatchEvent(escapeKeyboardEvent);
+
+            expect(stopPropagationSpy).toHaveBeenCalled();
+        }));
     });
 
     describe('error handling', () => {

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

@@ -23,6 +23,7 @@ import { InfoDrawerComponent } from './info-drawer.component';
 import { of } from 'rxjs';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { CoreTestingModule } from '../testing/core.testing.module';
+import { ESCAPE } from '@angular/cdk/keycodes';
 
 describe('InfoDrawerComponent', () => {
     let element: HTMLElement;
@@ -64,6 +65,24 @@ describe('InfoDrawerComponent', () => {
         expect(title.length).toBe(1);
         expect(title[0].nativeElement.innerText).toBe('FakeTitle');
     });
+
+    it('should stop propagation on keydown event', () => {
+        const escapeKeyboardEvent = new KeyboardEvent('keydown', { key: ESCAPE.toString() });
+        const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
+        fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
+
+        expect(stopPropagationSpy).toHaveBeenCalled();
+    });
+
+    it('should stop propagation on keyup event', () => {
+        const escapeKeyboardEvent = new KeyboardEvent('keyup', { key: ESCAPE.toString() });
+        const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
+        fixture.debugElement.triggerEventHandler('keyup', escapeKeyboardEvent);
+
+        expect(stopPropagationSpy).toHaveBeenCalled();
+    });
 });
 
 @Component({

lib/core/src/lib/info-drawer/info-drawer.component.ts

@@ -63,13 +63,13 @@ export class InfoDrawerComponent {
     contentBlocks: QueryList<InfoDrawerTabComponent>;
 
     @HostListener('keydown', ['$event'])
-    onKeyDown(event: KeyboardEvent) {
+    onKeyDown(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 
     @HostListener('keyup', ['$event'])
-    onKeyUp(event: KeyboardEvent) {
+    onKeyUp(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 
     showTabLayout(): boolean {

lib/core/src/lib/viewer/components/viewer-sidebar.component.ts

@@ -26,12 +26,12 @@ import { ChangeDetectionStrategy, Component, HostListener, ViewEncapsulation } f
 })
 export class ViewerSidebarComponent {
     @HostListener('keydown', ['$event'])
-    onKeyDown(event: KeyboardEvent) {
+    onKeyDown(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 
     @HostListener('keyup', ['$event'])
-    onKeyUp(event: KeyboardEvent) {
+    onKeyUp(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 }

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

@@ -1306,10 +1306,12 @@ describe('retrieve metadata on submit', () => {
         expect(formContentClicked).toHaveBeenCalledWith(contentLinkModel);
     });
 
-    it('should cancel bubbling a keydown event', () => {
+    it('should stop propagation on keydown event', () => {
-        const escapeKeyboardEvent = new KeyboardEvent('keydown', { keyCode: ESCAPE } as any);
+        const escapeKeyboardEvent = new KeyboardEvent('keydown', { key: ESCAPE.toString() });
+        const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
         fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
 
-        expect(escapeKeyboardEvent.cancelBubble).toBe(true);
+        expect(stopPropagationSpy).toHaveBeenCalled();
     });
 });

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

@@ -133,8 +133,8 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
     }
 
     @HostListener('keydown', ['$event'])
-    onKeyDown(event: KeyboardEvent) {
+    onKeyDown(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 
     ngOnChanges(changes: SimpleChanges) {

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

@@ -929,11 +929,13 @@ describe('StartProcessCloudComponent', () => {
             component.ngOnChanges({ appName: change });
         });
 
-        it('should cancel bubbling a keydown event ()', () => {
+        it('should stop propagation on keydown event', () => {
-            const escapeKeyboardEvent = new KeyboardEvent('keydown', { keyCode: ESCAPE } as any);
+            const escapeKeyboardEvent = new KeyboardEvent('keydown', { key: ESCAPE.toString() });
+            const stopPropagationSpy = spyOn(escapeKeyboardEvent, 'stopPropagation');
+
             fixture.debugElement.triggerEventHandler('keydown', escapeKeyboardEvent);
 
-            expect(escapeKeyboardEvent.cancelBubble).toBe(true);
+            expect(stopPropagationSpy).toHaveBeenCalled();
         });
 
         it('should hide title', () => {

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

@@ -147,8 +147,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
     }
 
     @HostListener('keydown', ['$event'])
-    onKeyDown(event: KeyboardEvent) {
+    onKeyDown(event: KeyboardEvent): void {
-        event.cancelBubble = true;
+        event.stopPropagation();
     }
 
     hasForm(): boolean {