Странное поведение matTooltip с кнопкой на панели инструментов и вложенной кнопкой

Question

Я испытываю странное поведение - хотя, возможно, оно работает как задумано (именно поэтому я не регистрирую ошибку сразу) или я использую mat-menu-item -директиву в месте, где я не должен?

Когда у меня есть кнопка, которая открывает меню, которое по очереди содержит кнопку с директивой mat-menu-item, ее всплывающая подсказка кажется странно неуместной.

Использование mat-button -directive вместо этого, кажется, решает проблему, но поведение кнопки не то же самое.

StackBlitz: https://stackblitz.com/edit/angular-inhkax

Если вы нажмете на профиль, вы будетеобратите внимание, что всплывающая подсказка «Редактировать профиль», кажется, появляется прямо на кнопке, которая только что открыла меню, хотя подсказка принадлежит второй кнопке (из трех) внутри меню.

Это всегдавсплывающая подсказка первой вложенной кнопки с mat-menu-item -направлением , которая отображается на кнопке вызывающего абонента (в данном случае «профиль») и, следовательно, находится в неправильном месте.

Это вызываетэта подсказка, чтобы " зависать " до этогоконкретная вложенная кнопка наведена, что приводит к исчезновению неуместной всплывающей подсказки и тому, что та же самая всплывающая подсказка отображается в правильной указанной (или по умолчанию) позиции.

Вы можете узнать пакеты и их версии в ссылке StackBlitz.

Answer 1

Кажется, проблема с перекрытием меню материалов.Я предполагаю, что пока меню открывается, мышь находится над первым элементом, и, следовательно, подсказка отображается неправильно.Вы можете избежать этого, выполнив следующие действия:

Добавьте ссылку для mat-menu-trigger например,

<button mat-button 
        #profileMenuTrigger="matMenuTrigger" 
        [matMenuTriggerFor]="profile">
    <mat-icon>face</mat-icon>&nbsp;Profile
</button>

после этого, установите matTooltipDisabled ввод на основе состояния триггера в первом пункте меню, например:

<button mat-menu-item 
        matTooltip="Show file upload" 
        [matTooltipDisabled]="!profileMenuTrigger.menuOpen">
    <mat-icon>file_upload</mat-icon>File upload
</button>

Ссылка на обновленный StackBlitz .