Issue with typeahead with latest ngx-bootstrap 7.1.2

[mukuljai]

Bug description: Facing issue with typeahead with ngx-bootstrap @7.1.2 whereas it works fine with 7.0.0

Issue: using typeahead as below.

[typeahead]="List$"
[typeaheadAsync]="true"
[typeaheadItemTemplate]="Template"

<ng-template #Template let-model="item" let-query="query">
    <div>
            Name:<span class="speration" [innerHTML]="model.name | highlight: query"></span>
    </div>
</ng-template>

Now with 7.1.2, it shows up in UI the dropdown list items as buttons and instead of showing as list item. The html conversion looks like <buttons> instead of <ul><li>...

Walk through the changes but not getting what change it has caused in typeahead module.

Versions of ngx-bootstrap, Angular, and Bootstrap: ngx-bootstrap: 7.1.2 Angular:11 Bootstrap:3:

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

Should show as list item instead of buttons in dropdown.

[meta72]

I've also experienced this issue.

The documentation is displaying the typeahead correctly: https://valor-software.com/ngx-bootstrap/#/typeahead#Basic-array

I'm using ngx-bootstrap version 7.1.0 as it is the latest one available on npm. The documentation is supposedly using ngx-bootstrap version 7.1.2, although I'm unable to switch to older versions in the documentation to verify that 7.1.2 fixes the issue.

Opening the stackblitz link for the basic array example leads to a stackblitz using version 7.1.1. If I switch to version 7.0.0 there, the typeahead is displayed correctly again.

The stackblitz is using Angular 12.1.0 and Bootstrap 3.3.7

[apotapcukv]

Hi, mukuljai!) We can't reproduce this issue locally. Can you, please, add reproducing it on stackblitz, or make a video of getting such issue, or just send us steps to reproduce? thank you for using our library)

[meta72]

@apotapcukv As I mentioned in my last comment, you can just change the ngx-bootstrap version in the example-stackblitz. I created a stackblitz with those changes, that shows the issue: https://stackblitz.com/edit/angular-c8mbwt?file=main.ts

[mukuljai]

@apotapcukv any update on this?

[mukuljai]

Checked typeahead code, could find below code may actually causing this, though not sure for isBs3=true too why showing as buttons? - https://github.com/lukasz-madej/ngx-bootstrap/blob/development/src/typeahead/typeahead-container.component.html can clearly see the difference -

<ng-template #bs4Template>
    <button #liElements
    ......
<ng-template #bs3Template>
    <li #liElements
    .....

Pls provide fix this asap.

[diegogmez]

I faced up the same problem a I thinks is a configuration problem. You have to set the bootstrap version to bs3

The problem comes from trying to guess the version of bootstrap used from the styles. From what I have read in the documentation it can fail and you have the option of doing the "set" manually.

I think the issue can be closed :)

[MarcinMik]

This change leads to issues in ngx-bootstrap 10 because with ngx-bootstrap 10 I'm no longer able to setTheme('bs3') -> only 'bs4' and 'bs5' which are using <button> <li>