Как отловить потерю фокуса с компонента?

Question

Есть компонент улучшенный dropbox и при потере фокуса я хочу скрыть выпадающий список. Вот код

import { Attribute, Component, Input, HostListener, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dropbox-comp',
  templateUrl: './dropbox.component.html',
  styleUrls: ['./dropbox.component.scss']
})
export class DropboxComponent{
  @Input() selected: object;
  @Input() array: [];

  @Output() selectedChange = new EventEmitter<object>();

  public isOpen = false;

  constructor(@Attribute('tabindex') public tabIndex: number = 0) {}

  toggle(){
    this.isOpen = !this.isOpen;
  }

  change_value(item){
    this.selectedChange.emit(item);
  }

  @HostListener("blur") //Не работает
  lostfocus(){
    this.isOpen = false;
  }

}

Разметка

<div class="dropdown selectDropdown" [ngClass]="{'open': isOpen}" (click)="toggle()" (blur)="lostfocus()">
  <ul (blur)="lostfocus()">
    <li *ngFor="let item of array; let i = index" (click)="change_value(item)"><a>{{item.name}}</a></li>
  </ul>
  <span>{{selected['name']}}</span>
</div>

подключение

    <app-dropbox-comp [array]="store['sortCarsParameters']['data']"  
 [selected]="store['sortCarsParameters']['selected']"></app-dropbox-comp>

Answer 1

В тех примерах, что скинул @overthesanity есть смысл, когда вы делаете универсальный autoclose, навешиваемый на любую сущность. Он расширяемый, масштабируемый, все дела.

Тогда, конечно, не стоит навешивать на все подряд хосты какую-то внутреннюю логику закрытия и прочих приблуд, которые непонятно как работают под капотом.

В вашем конкретном случае можно использовать и трюк с focus/blur для имитации клика снаружи. Здесь можно посмотреть пример

Если внутри темплейта дропбокса будут какие-то элементы, имеющие возможность фокуса, такой кейс надо отработать отдельно, чтобы передать хосту фокус.

БЛОГ НА HUSL

Как отловить потерю фокуса с компонента?

Ответы (1 шт):