AutoComplete panel opened with dropdown does not hide when clicked outside

[QuanticRain]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview

Current behavior
PrimeNg: 4.2.2

does not close drop down listing after selecting an item from the drop down list. You must either click out of the control or click the item twice in order to get the drop down list to go away.

Expected behavior
<p-autoComplete should close drop down listing after selecting an item from the drop down list.
It works as expected in version 4.1.2

Minimal reproduction of the problem with instructions
Use any version greater than 4.2.*, use the <p-autoComplete and the drop down list does not close after selecting an item.

What is the motivation / use case for changing the behavior?
I'd like it to work like it does in version 4.1.*.

Please tell us about your environment:
Windows, NPM, Angular 4.

• Angular version: 2.0.X
  Angular 4.* , angular version does not cause the issue.

• PrimeNG version: 2.0.X
  Broken in version 4.2.2, works fine in version 4.1.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Reproducible in Chrome and IE.

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript any version does not have any impact.

• Node (for AoT issues): node --version =
  No AOT work.

[markovicboban]

I have the same problem...

[zlipps]

I am also seeing this issue after upgrading to 4.2.1. Looks like the dropdownClick variable is still set to true when an item from the suggestions is selected the first time which is preventing hide from being called.

[zlipps]

Created a Plunker showing the issue. After some research I found it only happens when the drop down button is clicked, it works fine when typing into auto complete box, and there is an async action in the complete method.

Plunker: http://plnkr.co/edit/gOCEDoYor9YZ8pJd3KLM?p=info

[reinpeter]

Same problem here, i could not reproduce it so far outside of our project in a plkr, but the async in complete method is the key apparently! This is quite common i would say.
Thx @IsItBroken.

[reinpeter]

analyzing the code: the documentclicklistener which sets the dropdownclick flag to false, is only bound on the show method, which is to late in the case of async complete

[cagataycivici]

Review multiSelect as well

[cagataycivici]

Can it be replicated on showcase as well?

https://www.primefaces.org/primeng/#/autocomplete

[reinpeter]

For me not reproduceable on showcase, since it does not use async complete method there i think.

[Ketec]

Showcase has one issue - open dropdown, click anywhere else (do not select anything) - and it wont close.

Similar close issue also shows up if you have it attached to body and router navigates somewhere else - dropdown remains open and wont close until you navigate back to the component where the dropdown is.

Perhaps using focus/focusout to close it might be more reliable than outsideclick alone?

[cagataycivici]

Replicated, happens on async case for sure.

[hardikBharadava]

It still happening on V4.3.0, when we are using 2 Auto complete, Open dropdown for One using Button, and do nothing just open another Dropdown using button, it will opens dropdown panel for both auto complete.

[yuerdev]

add async set value