feat(cdk/menu): add output event for outside click of menu

this commit exposes an output which emits whenever the user clicks outside open menu

fixes #29072

Author: naaajii

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

@@ -153,6 +153,18 @@ describe('CdkContextMenuTrigger', () => {
       fixture.detectChanges();
       expect(getContextMenu()).toBeDefined();
     });
+
+    it('should emit that menu had click outside of it', () => {
+      openContextMenu();
+      expect(getContextMenu()).toBeDefined();
+      spyOn(fixture.componentInstance.trigger.outsideClicked, 'emit');
+
+      fixture.nativeElement.querySelector('#other').click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.trigger.outsideClicked.emit).toHaveBeenCalled();
+      expect(getContextMenu()).not.toBeDefined();
+    });
   });
 
   describe('nested context menu triggers', () => {

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

@@ -75,7 +75,11 @@ export type ContextMenuCoordinates = {x: number; y: number};
     {name: 'menuPosition', alias: 'cdkContextMenuPosition'},
     {name: 'menuData', alias: 'cdkContextMenuTriggerData'},
   ],
-  outputs: ['opened: cdkContextMenuOpened', 'closed: cdkContextMenuClosed'],
+  outputs: [
+    'opened: cdkContextMenuOpened',
+    'closed: cdkContextMenuClosed',
+    'outsideClicked: cdkContextMenuOutsideClicked',
+  ],
   providers: [
     {provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger},
     {provide: MENU_STACK, useClass: MenuStack},
@@ -218,6 +222,9 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
           if (!this.disableCloseOnOutsideClick) {
             this.menuStack.closeAll();
           }
+
+          // Emit that we had a click outside the menu.
+          this.outsideClicked.emit(event);
         }
       });
     }

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

@@ -73,6 +73,9 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
   /** Emits when the attached menu is requested to close */
   readonly closed: EventEmitter<void> = new EventEmitter();
 
+  /** Emits when the attached menu has click outside of it in open state */
+  readonly outsideClicked: EventEmitter<MouseEvent> = new EventEmitter();
+
   /** Template reference variable to the menu this trigger opens */
   menuTemplateRef: TemplateRef<unknown> | null;
 

tools/public_api_guard/cdk/menu.md

@@ -235,6 +235,7 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
     // (undocumented)
     ngOnDestroy(): void;
     readonly opened: EventEmitter<void>;
+    readonly outsideClicked: EventEmitter<MouseEvent>;
     protected overlayRef: OverlayRef | null;
     registerChildMenu(child: Menu): void;
     protected readonly stopOutsideClicksListener: Observable<void>;