重新聚焦输入框关闭下拉菜单

Question

我正在使用 ng-bootstrap 的 NgbTypeahead 组件。我遇到了一个问题，如果我在焦点已经存在的情况下单击输入框，下拉菜单会关闭。

<input id="typeahead-template" type="text" class="form-control" 
    [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
    [inputFormatter]="formatter" />

以下是重现问题的步骤和插件： http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview

在输入框中键入 al，这将打开下拉菜单，
单击输入框：关闭下拉列表。

您可以在输入框内保持单击，但下拉菜单将保持关闭状态。它只会在您键入其他字词时打开。

Answer 1

输入被关闭，因为行为可能来自 NgbTypeahead 本身。但是，如果绑定一个点击事件，对输入做stopPropagation，就可以解决这个问题。

src/typeahead-template.html

<input id="typeahead-template" type="text" class="form-control"
   [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
   [inputFormatter]="formatter" (click)="onClick($event)" />

src/typeahead-template.ts

onClick(event) {
  event.stopPropagation();
}

http://plnkr.co/edit/KSXmKOSPCv6OuE6OmzgA?p=preview

重新聚焦输入框关闭下拉菜单

Re-focusing into the input box closes the dropdown

ng-bootstrap

angular