Typeahead - Change Detection - Not working

[webdev48]

Trying to use ng2-boostrap typeahead and trying to clear the model on selection of a suggestion.

 <input [(ngModel)]="selected"
           [typeahead]="moduleNames"
           (typeaheadOnSelect)="typeaheadOnSelect($event);"
           [typeaheadOptionField]="'name'"
           class="form-control">

in component

public typeaheadOnSelect(e:any):void {

        console.log("typeaheadOnSelect ",e.item);
        this.uiBoardServ
            .addModule(e);

        this.selected ='';  // this is never reflected on the UI

    }

the typeahead search box is never cleared even when I am doing this.selected='' . In Angular 1, people solved it in some weird ways: http://stackoverflow.com/questions/22104498/how-to-clear-text-from-angularui-typeahead-input/26793276#26793276

Is this a Angular 2 bug or a ng2-boostrap issue ? Why is change detection not fired ?

Here is a Plnkr to demonstrate the problem:
http://plnkr.co/edit/VWwrMDzISfwfEfwvn1f5?p=preview

[Dinistro]

@webdev48 This looks like an issue in ng2-bootstrap. I will take a look.

[valorkin]

Finishing last bit and will publish @Dinistro 's fix for it today

[ked1]

This "fix" actually causes problems in our case.

We need to select "onKeyDown enter". To achieve this, we manually invoke this.typeaheadInstance._container.selectActiveMatch() (Template: #typeaheadInstance="bs-typeahead").

I expect the event listener typeaheadOnSelect(...) to be called. This works "onItemClick" but not in the self-implemented ENTER-Case (selectActiveMatch). The same issue exists by leaving "onKeyDown(tab").

If I temporarily remove the setTimeout in the typeahead-container.component.ts the selection by enter works fine and the typeaheadOnSelect is invoked as expected. Even the "tab" works well.

What am I doing wrong? Is there a known fix?

Thanks in advance!