Почему один элемент с настраиваемой директивой вызывает событие изменения другого элемента в Angular?

У меня есть форма ниже с несколькими элементами. Один элемент — это ввод с пользовательской директивой для получения данных о местоположении Google. Другой элемент — это элемент загрузки файла.

Когда я ввожу значение (в фокусе) в верхнем элементе и нажимаю клавишу ввода, оно запускает событие fileChangeEvent() в элементе #fileInput.

Мне трудно понять, почему?

FYI - я пытался изменить

(change)="fileChangeEvent($event)"

to

(click)="fileChangeEvent($event)"

и все равно заводится

Форма -

<form [formGroup]="editForm">

  // pressing enter, with this element in focus, triggers fileChangeEvent($event) in #fileInput element below
  <input #city appGooglePlaces (onSelect)="setAddress($event)" formControlName="city" class="form-control google-place-input">


  <button (click)="fileInput.click()" class="btn btn-yb w-100">Upload Photo</button>
  <input type="file" #fileInput (change)="fileChangeEvent($event)" />

</form>