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

[royporter7]

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?

[apotapcukv]

Hi, @AndersWinther-Dahl! We can’t reproduce the issue now to check if it has been fixed or not. If you still can, please do it at https://stackblitz.com/edit/angular-ivy-de1elj?file=tsconfig.json/ and share with us, or please add a recorded video.

[AndersWinther-Dahl]

@apotapcukv we've stopped supporting IE in the mean time. Maybe someone else can confirm that the issue is fixed.

[apotapcukv]

Dear AndersWinther-Dahl!
As per our check this issue is fixed in the latest version, so we’re closing the issue.
Please don’t hesitate to let us know if you face further issues.