Angular размытие на div или нет вызывается, если в раскрывающемся списке - PullRequest
Новая
       171

Angular размытие на div или нет вызывается, если в раскрывающемся списке

0 голосов
/ 25 апреля 2020

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

<input type="text" (focus)="field.show_options = true" (blur)="field.show_options = false" />
<div *ngIf="field.show_options">
    <div *ngFor="let option of field.options" (click)="validate()">
       <span>{{ option.label }}</span>
    </div>
</div>

Если я щелкну где-нибудь, div исчезнет хорошо. Но если я нажимаю на опцию, div тоже исчезает, но функция onclick (здесь она validate ()) не вызывается. Как это сделать? Я пытаюсь поместить событие onBlur в div, но не работает, даже с tabindex = "0". Любое решение?

1 Ответ

1 голос
/ 25 апреля 2020

В angular вы должны использовать focusout вместо blur: 

<input (focus)="field.show_options = true" 
       (focusout)="field.show_options = false"
       type="text">

Кроме того, важно отметить, что событие focusout запускается раньше, чем click событие. Поэтому вам нужно заставить focusout немного подождать, прежде чем изменить значение. Вы можете сделать это с помощью метода на стороне машинописного текста: 

_setFocus(focus: boolean) {
  if (!focus) {
    // the 200ms here is a matter of trial and error process: 
    //   very uncomfortable, but it's simple
    setTimeout(() => (this.field.show_options = focus), 200);
  } else {
    this.field.show_options = true;
  }
}

И в вашей HTML: 

<input (focus)="_setFocus(true)" 
       (focusout)="_setFocus(false)"
       type="text">

Демонстрация Stackblitz

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

...