Primeng: p-dropdown needs double click to select

[i-amn]

Current behavior
While using primeng dropdown needs double click to select the value. Pushing Enter key works fine.

Angular version: 7

PrimeNG version: 6.1.5

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 ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

Hi,

This is still an issue.

https://stackblitz.com/edit/test-p-table-msxkby?file=package.json

I just updated the stackblitz to primeng 6.
https://stackoverflow.com/questions/51720979/primeng-dropdown-needs-doubleclick-when-using-a-function-for-options

Thank you,
Aman

[i-amn]

This needs to be resolved, what if we want to show options in for loop and according to the key?

[Mysame]

This has nothing to do with PrimeNG.

You keep re-creating the options.
Angular keeps calling getOptions2() every update, which results in you clicking an object that either no longer exists, or has been replaced.

Bind options to a list that only updates when required, not one that gets re-created every Angular update.

[i-amn]

@Mysame the same code is perfectly working in p-autocomplete in that we can select the options through dropdown but not in p-dropdown, also the dropdown option can be selected but when we are double clicking on it please refer stackbliz demo

[Mysame]

You can down-vote all you want, honestly. The code is wrong, it's against how Angular is supposed to work. You'll get undefined behavior, because the scenario itself is, I'm sorry, utter garbage.

Don't count on this being _fixed_, fix your own code.

[i-amn]

@Mysame i am not able to understand whatever you said

'Angular keeps calling getOptions2() every update, ' that's what we want to create options on every update.

This has nothing to do with PrimeNG.
how p-autocomplete working fine with the same code?

for now can you suggest how it is working when we are double clicking on it?

[Mysame]

You can find dozens of posts about change detection.
Simply put, every time _anything_ changes in your app, Angular runs change detection. This will re-validate and re-calculate all bindings. Including your code of [options]="getOptions2(). Every time this happens, getOptions2() will return a brand new list. Data might go out of sync, where the GUI is showing old data, but the binding is new. Hence, clicking it doesn't do anything. But clicking triggers change detection _again_, which will repopulate the dropdown.

Long story short: don't put functions as bindings.

https://stackblitz.com/edit/test-p-table-rsjpqd

[i-amn]

@Mysame and again i am asking same question thrice

"how p-autocomplete working fine with the same code?"

[Mysame]

with the same code

You don't, the code is wrong.
I'm unsubscribing from this issue, as it is clearly a waste of my time

[cagataycivici]

Not PrimeNG related, avoid recreating options at the binding.