Menu closed on click any menu item but requirement is, if clicked on item menu should open

Refs: https://material.angular.io/cdk/menu/examples

Angular cdk menu closed on click any menu item but requirement is, if clicked on item menu should open and should close on clicked outside the menu or on esc

Note - we can't use https://material.angular.io/cdk/overlay/overview because it's not provide the accessibility. If we use this arrow key down or up scrolling main window while we should jump to opened menu item and other requirements also not full filled using this.

If anyone has any solution, please share

Thanks!

Code -


import {Component} from '@angular/core';
import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';

/** @title Menu with Standalone Trigger. */
@Component({
selector: 'cdk-menu-standalone-menu-example',
styleUrl: 'cdk-menu-standalone-menu-example.css',
templateUrl: 'cdk-menu-standalone-menu-example.html',
standalone: true,
imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem],
})
export class CdkMenuStandaloneMenuExample {}

.example-menu {
display: inline-flex;
flex-direction: column;
min-width: 180px;
max-width: 280px;
background-color: rgba(255, 255, 255);
padding: 6px 0;
}

.example-menu-item,
.example-standalone-trigger {
background-color: transparent;
cursor: pointer;
border: none;

user-select: none;
min-width: 64px;
line-height: 36px;
padding: 0 16px;

display: flex;
align-items: center;
flex-direction: row;
flex: 1;
}

.example-menu-item:hover {
background-color: rgb(208, 208, 208);
}

.example-menu-item:active {
background-color: rgb(170, 170, 170);
}

.example-standalone-item {
background-color: rgb(239, 239, 239);
}
.example-standalone-item:hover {
background-color: rgb(208, 208, 208);
}
.example-standalone-item[aria-expanded='true'] {
background-color: rgb(208, 208, 208);
}

<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>

<ng-template #menu>
<div class="example-menu" cdkMenu>
<button class="example-menu-item" cdkMenuItem>Refresh</button>
<button class="example-menu-item" cdkMenuItem>Settings</button>
<button class="example-menu-item" cdkMenuItem>Help</button>
<button class="example-menu-item" cdkMenuItem>Sign out</button>
</div>
</ng-template>

Continue reading...