div上的角度模糊，如果在下拉菜单中则不调用

Question

我有一个输入，当我输入内容时，我会显示一个具有不同选项的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（））。如何处理？我尝试在div上放置onBlur事件，但是即使使用tabindex =“ 0”也无法正常工作。任何解决方案？

Answer 1

在角度上，您应该使用focusout而不是blur：

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

Stackblitz demo