重新聚焦到输入框将关闭下拉列表

时间:2017-11-30 20:28:19

标签: angular ng-bootstrap

我正在使用ng-bootstrap的NgbTypeahead组件。如果我在焦点已经存在的情况下单击输入框,我将面临一个下拉关闭的问题。

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

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

  1. 在输入框中输入 al ,这将打开下拉列表
  2. 点击输入框:导致关闭下拉列表。
  3. 您可以在输入框内单击,但下拉列表将保持关闭状态。它只会在您输入其他单词时打开。

1 个答案:

答案 0 :(得分:0)

输入被关闭,因为行为可能来自NgbTypeahead本身。但是,如果绑定click事件并对输入执行stopPropagation,则可以解决此问题。

<强>的src /预输入-template.html

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

<强>的src /预输入-template.ts

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

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