Ошибка выброса события, когда испускаемое событие в событии размытия в угловых 5

Question

У меня есть поле автозаполнения моего пользовательского элемента управления (в котором есть поле ввода и ul) Я хочу отменить выбор элемента, когда пользователь вручную удаляет текст в поле ввода и переходит к другому элементу управления

<div class="dropdown-container">
  <input id="{{inputId}}" class="form-control" type="text" [(ngModel)]="content" name="content" placeholder="{{placeholder}}"
         (keyup)="handleKeyupEvent($event)"
         (click)="toggleDropdown($event)"
         (keyup.escape)="closeDropdown($event)"
         (blur)="onBlur($event)"
         (keydown.arrowup)="traverseDropdown($event)"
         (keydown.arrowdown)="traverseDropdown($event)"
         (keydown.enter)="onEnterSelection($event)"
         [readOnly]="readOnly"
         (focus)="onFocus($event)"
  >
  <span class="fa fa-angle-down dropdown-toggle"></span>

  <ul class="dropdown-list"
      *ngIf="dropdownOpen && filteredList.length > 0 && !readOnly"
      [ngClass]="{'align-right': alignRight, 'wrapped':!parentIsVisible, 'limited-height': closeToBottom}">
    <li *ngFor="let item of filteredList; let i=index" [ngClass]="{'focused': isFocused(i)}"
        (mousedown)="onSelection($event, i)">
      <ng-template [ngTemplateOutletContext]="{item: item}" [ngTemplateOutlet]="template"></ng-template>
    </li>
  </ul>
</div>

Строка

this.itemSelected.emit(null); не генерирует событие itemSelected при отправке из события onBlur, но она испускается при отправке из события onSelection

файл autocompleteBox.ts: -

content:string = '';
@Input() options:any[] = [];
@Output() itemSelected = new EventEmitter<any>();

 public onBlur(event:any):void {
if(this.dropdownOpen){
  this.closeDropdown(null);
}

if(this.content === '') {
  this.selectedItem = null;
  this.itemSelected.emit(null);
  this.updateContent('');
  }
}

private onSelection(event:any, index:number):void {
  event.preventDefault();
  event.stopPropagation();

  if (this.filteredList.length > 0) {
    this.itemSelected.emit(this.filteredList[index]);
  }

  this.selectedItem = this.filteredList[index];
  this.content = this.selectedItem.name;
  this.closeDropdown(null);
}

consumer.html: -

<auto-complete-dropdown (itemSelected)="onContryChange($event)" 
        [options]="countries" placeholder="{{ 'selectCountry' | translate }}">
     <ng-template let-item="item" >
          <span title="{{item.id}}, {{item.displayName}}">                    
             <span>{{item.name}}</span>
        </span>
     </ng-template>
</auto-complete-dropdown>

consumer.ts

onCountryChange($event) {
    this.states= [];
    if ($event == null) {
      return;
    }
    this.getStates($event.number);
  }

что я могу сделать, чтобы событие itemSelected было запущено из события onBlur?