feat(cdk/menu): not to close on outside click

this commit adds new input in menu trigger which allows users to disable closing menu on outside clicks

fixes #29072

Author: naaajii

src/cdk/menu/context-menu-trigger.spec.ts

@@ -143,6 +143,16 @@ describe('CdkContextMenuTrigger', () => {
       fixture.detectChanges();
       expect(getContextMenu()).toBeDefined();
     });
+
+    it('should stay open with disable close on outside click', () => {
+      fixture.componentInstance.shoudCloseOnOutsideClicks = true;
+      openContextMenu();
+      expect(getContextMenu()).toBeDefined();
+
+      fixture.nativeElement.querySelector('#other').click();
+      fixture.detectChanges();
+      expect(getContextMenu()).toBeDefined();
+    });
   });
 
   describe('nested context menu triggers', () => {
@@ -442,7 +452,8 @@ describe('CdkContextMenuTrigger', () => {
 
 @Component({
   template: `
-    <div [cdkContextMenuTriggerFor]="context"></div>
+    <div [cdkContextMenuTriggerFor]="context"
+    [cdkContextMenuDisableCloseOnOutsideClick]="shoudCloseOnOutsideClicks"></div>
     <div id="other"></div>
 
     <ng-template #context>
@@ -459,6 +470,8 @@ class SimpleContextMenu {
   @ViewChild(CdkMenu, {read: ElementRef}) nativeMenu?: ElementRef<HTMLElement>;
 
   @ViewChildren(CdkMenu) menus: QueryList<CdkMenu>;
+
+  shoudCloseOnOutsideClicks = false;
 }
 
 @Component({

src/cdk/menu/context-menu-trigger.ts

@@ -96,6 +96,10 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   /** Whether the context menu is disabled. */
   @Input({alias: 'cdkContextMenuDisabled', transform: booleanAttribute}) disabled: boolean = false;
 
+  /** Whether on clicking outside of menu should close it */
+  @Input({alias: 'cdkContextMenuDisableCloseOnOutsideClick', transform: booleanAttribute})
+  disableCloseOnOutsideClick: boolean = false;
+
   constructor() {
     super();
     this._setMenuStackCloseListener();
@@ -210,7 +214,10 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
 
       outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe(event => {
         if (!this.isElementInsideMenuStack(_getEventTarget(event)!)) {
-          this.menuStack.closeAll();
+          // We do not want to close menu if user does not want to on outside clicks.
+          if (!this.disableCloseOnOutsideClick) {
+            this.menuStack.closeAll();
+          }
         }
       });
     }

tools/public_api_guard/cdk/menu.md

@@ -35,13 +35,16 @@ export const CDK_MENU: InjectionToken<Menu>;
 export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
     constructor();
     close(): void;
+    disableCloseOnOutsideClick: boolean;
     disabled: boolean;
     // (undocumented)
+    static ngAcceptInputType_disableCloseOnOutsideClick: unknown;
+    // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     open(coordinates: ContextMenuCoordinates): void;
     _openOnContextMenu(event: MouseEvent): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkContextMenuTrigger, "[cdkContextMenuTriggerFor]", ["cdkContextMenuTriggerFor"], { "menuTemplateRef": { "alias": "cdkContextMenuTriggerFor"; "required": false; }; "menuPosition": { "alias": "cdkContextMenuPosition"; "required": false; }; "menuData": { "alias": "cdkContextMenuTriggerData"; "required": false; }; "disabled": { "alias": "cdkContextMenuDisabled"; "required": false; }; }, { "opened": "cdkContextMenuOpened"; "closed": "cdkContextMenuClosed"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkContextMenuTrigger, "[cdkContextMenuTriggerFor]", ["cdkContextMenuTriggerFor"], { "menuTemplateRef": { "alias": "cdkContextMenuTriggerFor"; "required": false; }; "menuPosition": { "alias": "cdkContextMenuPosition"; "required": false; }; "menuData": { "alias": "cdkContextMenuTriggerData"; "required": false; }; "disabled": { "alias": "cdkContextMenuDisabled"; "required": false; }; "disableCloseOnOutsideClick": { "alias": "cdkContextMenuDisableCloseOnOutsideClick"; "required": false; }; }, { "opened": "cdkContextMenuOpened"; "closed": "cdkContextMenuClosed"; "outsideClicked": "cdkContextMenuOutsideClicked"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkContextMenuTrigger, never>;
 }