Ngx-bootstrap: fix(typeahead): Typeahead with typeaheadMinLength 0 and placeholder requires two clicks for selecting an item in IE

[AndersWinther-Dahl]

Bug description or feature request:

When using a typeahead with default values (typeaheadMinLength=0) IE will not let you choose an item without clicking twice

Plunker/StackBlitz that reproduces the issue:

Can be recreated in IE11 with the "Reactive forms"-example on
https://valor-software.com/ngx-bootstrap/#/typeahead
Click inside the input field and click on one of the items that shows (don't type anything). The first click gets ignored, the second click chooses the item.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: v2.0.0-beta.8

Angular: Same as demo-page

Bootstrap: 4

Best regards,
Anders Winther-Dahl

[rhoiyds]

For me, the first click on a typeahead with typeaheadMinLength=0 on IE11 simply does not make the HTTP call whatsoever.

But yes, I too can confirm that there is issues with typeahead behavior and IE11.

[snimelius]

I'm using a temporary fix to get around this:
Add a blank space in the model then trim the model..

if (document.documentMode) { this.model+= " "; this.model.trim(); }

[Oliver-Piorun]

This bug is crucial for our project. Is there an ETA for this? Or the typeahead fixes in general. Or even better: A temporary workaround? I don't know how to apply the workaround by @snimelius . We are using reactive forms btw.

Greetings!

[panyann]

Still doesn't work, please look into this. It's also important for our project.

[arunadhumal18]

For me, the first click on a typeahead with typeahead MinLength=0 on IE11 is working but when i am changing the value second time, typeahead list is not getting hided on one click need to click twice and after that list is not getting opened on focus when typeahead field is empty.

[scotteby]

Noticed same issue, where it needs two clicks to select in IE11 when minlength=0.

Has anyone found a workaround?

[panyann]

@scotteby The workaround is to place a space character in the input if the browser is IE. It's hideous and a little bothersome to implement, but it works.

[scotteby]

Thanks @panyann, I saw that comment earlier but didn't realize what it was saying. You are right, it's a little rough, but it does work.

[cmakohon]

Having this exact same issue. Would love it to be fixed soon. Weird that taking the placeholder out resolves the issue.

[sarimj]

How can ngx-bootstrap team underestimate this issue. It is really a big and clear issue?