Как скрыть / показать mat-menu на mouseenter и mouseleave на кнопке?

Question

Я могу показать mat-menu на mouseenter с помощью кнопки, а также могу закрыть его на mouseleave из выпадающего меню.Я хочу, чтобы меню было закрыто, если я оставлю саму кнопку.В настоящее время это работает только тогда, когда я сначала иду в меню, а затем покидаю его.

<button mat-button *ngIf="logged_in" [mat-menu-trigger-for]="menu" (mouseenter)="menuTrigger.openMenu()"
    #menuTrigger="matMenuTrigger">Profile
    <mat-menu [overlapTrigger]="false" #menu="matMenu">
        <span (mouseleave)="menuTrigger.closeMenu()">
            <button mat-menu-item>
                <mat-icon>account_circle</mat-icon>My Profile
            </button>
        </span>
    </mat-menu>
</button>