fix(popover-edit): prevent default escape action (#16747)

Adds a `preventDefault` to the escape key presses of the popover edit and ignores escape presses that have a modifier key. This prevents Safari from exiting fullscreen mode and avoids interfering with other OS-level actions.

We already made a pass to add this logic to all other overlay components in #16202, but it looks like we missed the popover edit.

(cherry picked from commit 48cc514)

Author: crisbeto

src/cdk-experimental/popover-edit/lens-directives.ts

@@ -16,6 +16,7 @@ import {
   Input,
   HostListener,
 } from '@angular/core';
+import {hasModifierKey} from '@angular/cdk/keycodes';
 import {EDIT_PANE_SELECTOR} from './constants';
 import {closest} from './polyfill';
 import {EditRef} from './edit-ref';
@@ -130,8 +131,9 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   // tslint:disable:no-host-decorator-in-concrete
   @HostListener('keydown', ['$event'])
   _handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
+    if (event.key === 'Escape' && !hasModifierKey(event)) {
       this.close();
+      event.preventDefault();
     }
   }
 

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -771,10 +771,26 @@ cdkPopoverEditTabOut`, fakeAsync(() => {
         it('closes the lens on escape', fakeAsync(() => {
           component.openLens();
 
-          component.getNameInput()!.dispatchEvent(
-              new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'}));
+          const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'});
+          spyOn(event, 'preventDefault').and.callThrough();
+          component.getNameInput()!.dispatchEvent(event);
 
           expect(component.lensIsOpen()).toBe(false);
+          expect(event.preventDefault).toHaveBeenCalled();
+          clearLeftoverTimers();
+        }));
+
+        it('does not close the lens on escape with a modifier key', fakeAsync(() => {
+          component.openLens();
+
+          const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'});
+          Object.defineProperty(event, 'altKey', {get: () => true});
+
+          spyOn(event, 'preventDefault').and.callThrough();
+          component.getNameInput()!.dispatchEvent(event);
+
+          expect(component.lensIsOpen()).toBe(true);
+          expect(event.preventDefault).not.toHaveBeenCalled();
           clearLeftoverTimers();
         }));
 

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -690,10 +690,27 @@ matPopoverEditTabOut`, fakeAsync(() => {
         it('closes the lens on escape', fakeAsync(() => {
           component.openLens();
 
-          component.getInput()!.dispatchEvent(
-              new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'}));
+          const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'});
+
+          spyOn(event, 'preventDefault').and.callThrough();
+          component.getInput()!.dispatchEvent(event);
 
           expect(component.lensIsOpen()).toBe(false);
+          expect(event.preventDefault).toHaveBeenCalled();
+          clearLeftoverTimers();
+        }));
+
+        it('does not close the lens on escape with a modifier key', fakeAsync(() => {
+          component.openLens();
+
+          const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Escape'});
+          Object.defineProperty(event, 'altKey', {get: () => true});
+
+          spyOn(event, 'preventDefault').and.callThrough();
+          component.getInput()!.dispatchEvent(event);
+
+          expect(component.lensIsOpen()).toBe(true);
+          expect(event.preventDefault).not.toHaveBeenCalled();
           clearLeftoverTimers();
         }));