Ng-bootstrap: it is not possible to reset input value for typeahead component

[mdelprado86]

Bug description:

For the typeahead component, it is not possible to clear the model after the results list appears. If the results list doesn't appear, the model can be cleared from a button without problem

Steps to reproduce:

• open https://stackblitz.com/edit/angular-rybwwn-w3w4ca
• introduce text "aaa"
• click on button "Clear"
• the input is cleared
• introduce text "ala"
• click on button "Clear"
• the input is not cleared

You can fork a StackBlitz from one of our demos and use it as a starting point.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 6.1.0

ng-bootstrap: 3.3.0

Bootstrap: 4.0

[angelika]

Does anybody know a possible workaround for this? I don't care how dirty it is, I just need it to work :D

[wannadream]

Try this:

clear(){
    setTimeout(()=>{
      this.model = '';
    }, 200);
  }

https://stackblitz.com/edit/angular-rybwwn-vzxdf1

[wannadream]

The problem occurs here: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/typeahead/typeahead.ts

Line 224:

dismissPopup() {
    if (this.isPopupOpen()) {
      this._closePopup();
      this._writeInputValue(this._inputValueBackup);
    }
  }

Whenever pop-up is dimissed, the previous backed up value was written back.

Proposed change:

if (this.isPopupOpen()) {
      this._closePopup();
      if (this._elementRef.nativeElement.value !== '') {
        this._writeInputValue(this._inputValueBackup);
      }
    }