Question

我正在使用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

在输入框中输入 al ，这将打开下拉列表
点击输入框：导致关闭下拉列表。

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

Answer 1

输入被关闭，因为行为可能来自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

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

1 个答案: