feat(module:dropdown): close context menu on escape (#7915)

* feat(module:dropdown): close context menu dropdown on keydown escape

* refactor(module:dropdown): optimize closing context performance

Author: Nicoss54

components/dropdown/context-menu.service.spec.ts

@@ -1,11 +1,12 @@
+import { ESCAPE } from '@angular/cdk/keycodes';
 import { OverlayContainer, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ApplicationRef, Component, Provider, Type, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, inject, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Subject } from 'rxjs';
 
-import { createMouseEvent } from 'ng-zorro-antd/core/testing';
+import { createKeyboardEvent, createMouseEvent, dispatchEvent } from 'ng-zorro-antd/core/testing';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 
 import { NzContextMenuService } from './context-menu.service';
@@ -120,6 +121,27 @@ describe('context-menu', () => {
       expect(overlayContainerElement.textContent).toBe('');
     }).not.toThrowError();
   }));
+  it('should backdrop work with keyboard event ESCAPE', fakeAsync(() => {
+    const fixture = createComponent(NzTestDropdownContextMenuComponent, [], []);
+    const keyboardEvent = createKeyboardEvent('keydown', ESCAPE, undefined, 'Escape');
+    fixture.detectChanges();
+    expect(overlayContainerElement.textContent).toBe('');
+    fixture.detectChanges();
+    expect(() => {
+      const fakeEvent = createMouseEvent('contextmenu', 300, 300);
+      const component = fixture.componentInstance;
+      component.nzContextMenuService.create(fakeEvent, component.nzDropdownMenuComponent);
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expect(overlayContainerElement.textContent).toContain('1st menu item');
+      dispatchEvent(document.body, keyboardEvent);
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      expect(overlayContainerElement.textContent).toBe('');
+    }).not.toThrowError();
+  }));
   it('should not run change detection if the overlay is clicked inside', async () => {
     const fixture = createComponent(NzTestDropdownContextMenuComponent, [], []);
     fixture.detectChanges();

components/dropdown/context-menu.service.ts

@@ -6,8 +6,8 @@
 import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Injectable, NgZone } from '@angular/core';
-import { fromEvent, Subscription } from 'rxjs';
-import { filter, take } from 'rxjs/operators';
+import { fromEvent, merge, Subscription } from 'rxjs';
+import { filter, first } from 'rxjs/operators';
 
 import { NzContextMenuServiceModule } from './context-menu.service.module';
 import { NzDropdownMenuComponent } from './dropdown-menu.component';
@@ -51,13 +51,15 @@ export class NzContextMenuService {
 
     this.closeSubscription.add(
       this.ngZone.runOutsideAngular(() =>
-        fromEvent<MouseEvent>(document, 'click')
-          .pipe(
+        merge(
+          fromEvent<MouseEvent>(document, 'click').pipe(
             filter(event => !!this.overlayRef && !this.overlayRef.overlayElement.contains(event.target as HTMLElement)),
             /** handle firefox contextmenu event **/
-            filter(event => event.button !== 2),
-            take(1)
-          )
+            filter(event => event.button !== 2)
+          ),
+          fromEvent<KeyboardEvent>(document, 'keydown').pipe(filter(event => event.key === 'Escape'))
+        )
+          .pipe(first())
           .subscribe(() => this.ngZone.run(() => this.close()))
       )
     );