Меню не открывается на keydown.enter при использовании внутри углового заголовка панели расширения 6

Question

Я использую mat-menu с mat-extension-panel, где есть панель расширения, я поместил mat-иконку в конце заголовка панели расширения, при нажатии на этот значок откроется пункт меню.при щелчке по заголовку панели расширения открывается описание панели.Это желаемое поведение, это работает с помощью щелчка мыши.

Но это не то же самое, когда я переходил к значку с помощью keydown.enter (с помощью вкладки), оно сворачивало панель, когда я вкладывал в значок и нажималвведите, как-то я исправил это с помощью event.stopPropagation () и вернул false.Но это не открытие пункта меню при нажатии Enter на значке.Вот ссылка на стек стека menuwithExpansionPanel .Пожалуйста, помогите мне в решении этой проблемы.Заранее спасибо.

Answer 1

Ваша кнопка должна быть триггером, а не значок:

<span class="export-to-csv-span">
  <button mat-button variant="icon-button"
      [matMenuTriggerFor]="exportAsMenu"
      (click)="$event.stopPropagation()"
      (keydown.enter)="$event.stopPropagation()"
      (keydown.space)="$event.stopPropagation()">
    <mat-icon>vertical_align_bottom</mat-icon>
  </button>
</span>