Как получить событие клика на входе в поле mat-form?

Question

Я хочу очистить выбранную опцию при нажатии кнопки автозаполнения:

  <mat-form-field class="example-full-width" (click)="clear()" appearance="outline">
    <input matInput placeholder="State" aria-label="State" 
    [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" 
      [value]="state.name">
      </mat-option>
    </mat-autocomplete>
  </mat-form-field> 

Но клик вызывается, даже когда вы нажимаете немного ниже (в форме есть поле)

Пример, показывающий ввод сброса, нажав снаружи

Answer 1

Используйте (click)="clear()" для тега <input>,
и не для тега mat-form-field.

Добавьте следующее к styles.css, чтобы перезаписать css, и сделайте так, чтобы input тег закрывал контейнер на всю высоту.

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0 !important;
  border-top: 0;
}
input.mat-input-element {
  padding: 1.84375em 0 1em 0;
}

Демонстрация Stackblitz - только очистить от ввода нажмите

Answer 2

Я нашел способ, не меняя стиль, просто добавив событие click для mat-form-field-flex

document
  .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
  .addEventListener('click', (ev) => this.clear(ev));