Witam.
Najwyraźniej robię coś źle. Potrzebuje, aby po kliknięciu w element menu, to menu zostało otwarte. Dopiero po naciśnięciu poza obszarem menu doszło do zamknięcia. Wiele stackoverflowów sugeruje, aby skorzystać z $event.stopPropagation(), ale u mnie to nie działa.

Elementy menu - w pętli generowane

<button (click)="selectColumn(column, $event)" *ngFor="let column of productColumns" mat-menu-item [disabled]="column.disabled">

Funkcja selectColumn()

  selectColumn(selected: Column, event: Event) {
    const columns = this.localStorage.getObject<Column[]>('productsColumns');
    const column = columns.find(x => x.id === selected.id);
    const index = columns.indexOf(column);
    columns[index].selected = !columns[index].selected;
    this.productColumns = columns;
    this.localStorage.setObject('productsColumns', columns);
    this.tableColumns = columns.filter(x => x.selected === true).map(({ id }) => id);
    event.stopPropagation();
  }

Jeśli skorzystam tylko z opcji $event.stopPropagation(), bez własnej logiki to działa:

<button (click)="$event.stopPropagation()" *ngFor="let column of productColumns" mat-menu-item [disabled]="column.disabled">

Czy to oznacza, że muszę ręcznie wywołać menu.open() oraz menu.close() w odpowiednich przypadkach?