Подавить выбор открыть при нажатии кнопки в том же поле формы

Question

У меня есть поле формы, которое содержит кнопку выбора и кнопку справа. Идея состоит в том, что пользователь может нажать кнопку «Добавить», чтобы добавить опцию в избранное. Проблема в том, что при нажатии кнопки «Добавить» откроется и мое диалоговое окно, и параметры выбора, причем параметры выбора перекрывают мой диалог. Я хотел бы открыть диалог только по нажатию кнопки «Добавить». Как мне отменить выбор открытия?

<form>
  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <mat-select #mySelect>
      <mat-option>Cat</mat-option>
      <mat-option>Dog</mat-option>
      <mat-option>Bird</mat-option>
    </mat-select>
      <button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="mySelect.close(); alert('open a dialog')">
        <mat-icon>add</mat-icon>
    </button>
  </mat-form-field>
</form>

Следующий пример показывает, что нажатие кнопки открывает выбор, а когда нет?

Пример StackBlitz

- EDIT-- @jal_a предоставил ответ в комментариях. Решение состоит в том, чтобы добавить event.stopPropagation ()

<button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="$event.stopPropagation(); alert('open a dialog')">

Stackblitz - Исправлено

Answer 1

Как упоминалось в оригинальном сообщении и в комментариях, короткий ответ - event.stopPropagation() на событие нажатия кнопки, чтобы остановить всплытие события до mat-form-field.

Я также хотел добавить, как событие щелчка на mat-form-field открывает компонент mat-select.

mat-form-field Компонент предназначен для переноса элементов управления полем формы, таких как mat-select, и для удобства пользователя при щелчке он имитирует событие нажатия на дочерний элемент управления формы, который он переносит.

Как это работает, mat-select реализует абстрактный класс MatFormFieldControl, который имеет метод onContainerClick. Что делает mat-form-field, так это то, что у него есть ссылка на его дочерний элемент управления формы, и при нажатии он проверяет, реализует ли дочерний элемент управления метод onContainerClick и, если это так, он просто вызывает метод. Следовательно, фокусировка и открытие mat-select в этом случае, даже если событие click не было вызвано в элементе управления формы выбора.