Как определить фокус на родительском div, а не на дочернем div в Angular4

Question

У меня есть элемент автозаполнения. Он состоит из поля ввода, кнопки и элемента div, который содержит автозаполнения. Мне нужно поведение, когда я щелкаю за пределами поля ввода или раскрывающегося списка, он вызывает обратный вызов, который сохраняет все, что находится в поле ввода, и если я щелкаю по раскрывающемуся выбору, я хочу, чтобы он вызывал событие, которое выбирает то, что я щелкнул, и сохраняет это.

Но в настоящее время, вместо того, чтобы работать в обычном режиме, когда я нажимаю на раскрывающееся меню, вызывается фокусировка, раскрывающееся меню не закрывается, и при втором щелчке оно фактически выбирает значение раскрывающегося списка.

Это компонент:

    <div class="input-group input-group-sm " (focusout)="blur($event)">
  <input type="text" class="form-control" [ngModel]="userInput" title="{{userInput}}" (ngModelChange)="onValueChanged($event)"
    (focus)="$event.target.select()">
  <div>
    <button type="button" class="btn btn-secondary dropdown-toggle" (click)="showPredefinedOptions()">
    </button>
    <div *ngIf="showDropdown" [ngClass]="{'dropdown-menu dropdown-menu-right':true, 'show-address-autocomplete':showDropdown}">
      <div *ngIf="currentUserAddresses">
        <a *ngFor="let item of currentUserAddresses" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
        <div class="divider dropdown-divider"></div>
      </div>
      <a *ngFor="let item of currentResult" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
    </div>
  </div>
</div>

Внутри файла TS у меня есть строка @Output () focusOut: EventEmitter = new EventEmitter (); это определяет focusoutevent, на который я подписываюсь.

И вот как я его использую:

<td> <address-autocomplete [value]="product.defaultDeliveryAddress ? defaultAddress : product.deliveryAddress"  (onSelect)="onAddressChanged($event, product)"
                                 [userAddresses]="userAddressed" (onWritten)="onAddressWritten($event, product)" (focusOut)="focusOut(product)">></address-autocomplete></td>

Почему фокусировка вызывается, когда я нажимаю на выпадающий элемент?

Answer 1

Проще использовать Реактивные формы Angular для этого:

<input type="text" [formControl]="inputControl">

<select [formControl]="selectControl">
  <!-- ... -->
</select>

import { FormControl } from '@angular/forms';

export class MyComponent {
  inputControl = new FormControl(null, { updateOn: 'blur' });
  selectControl = new FormControl(null, { updateOn: 'change' });

  ngOnInit() {
    inputControl.valueChanges.subscribe(value => {
      // ...
    });
    selectControl.valueChanges.subscribe(value => {
      // ...
    });
  }
}