ngbTypeAhead never shows suggestions

Question

I have found a very odd behaviour with ng-boostrap for an App I am developing.

I am using ng-bootstrap: 1.1.x with Angular 5.2.x

component.html

has the bootstrap 4-alpha card. (code reduced for brewity)

<div class="card-block">
                        <label for="typeahead-template"><span>Search</span></label>
                        <input id="typeahead-template"
                               type="text"
                               class="form-control"
                               [(ngModel)]="searchModel"
                               [ngbTypeahead]="search"
                               [resultTemplate]="rt"
                               [inputFormatter]="formatter"
                        >
                        <ng-template #rt let-r="result" let-t="term">
                            {{ r.translatedProperty}}
                        </ng-template>
                    <select size="10" class="form-control mr-4">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="let eachVal of objResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                    </select>
</div>

The output looks like below:

component.ts

this.propertyResults is an empty array of type any defined as public where response from server is stored.

 // Autocompletion Implementation from NG-BOOTSTRAP
    public search = (text$: Observable<string>) =>
        text$.pipe(
            debounceTime(200),
            map((term: string) => term === '' ? []
                : this.propertyResults.filter(v => v.translatedProperty.toLowerCase()
                    .indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );
    public formatter = (x: {translatedProperty: string}) => x.translatedProperty;

working

The backend is called and the information is stored in this.propertyResults array and then user proceeds to search something in the input field, hence triggering search for the Typeahead.

data

data from server looks like:

[
  {
    "propertyURL": "http://semanticweb.org/blahblah",
    "datatypeProperty": true,
    "objectProperty": false,
    "translatedProperty": "AverageDeliveryTimeInDays"
  },
  .. so on
]

Current Output

No suggestions displayed from ng-template

NOTE: on the contrary, when I press Tab key I get the suggestion filled! How is that? I have a StackBlitz Example for the same and there is works perfectly. But on using the same code in the Application I cannot see suggestions.

Has this something to do with the layout within the card? I need the suggestion template to showup as it is critical for the application.

Answer 1

Apparently the component works well with Bootstrap 4.1.1 and the previous version that I was using was Bootstap 4-alphav3 which might have caused problems.