Re-focusing into the input box closes the dropdown

Question

I am using NgbTypeahead component of ng-bootstrap. I am facing an issue where dropdown closes if I click in the input box while the focus is already there.

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

Here are steps and plunker to reproduce the issue: http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview

1. Type al in the input box, this will open the dropdown,
2. Click in the input box: results in closing the dropdown.

You can keep click inside the input box but the dropdown will stay closed. It will only open if you type an additional word.

Answer 1

The input gets closed because probably the behaviour comes from NgbTypeahead itself. However, this can be solved if you bind a click event and do stopPropagation on the input.

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