Primeng: Dropdown performance issue

[raducostea]

[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

http://plnkr.co/edit/TVrZdkrMs8iPDmd8RnPR?p=preview

Current behavior
Having about 3 drop-down with 180 elements in each makes the page unusable. Each time i add a new drop-down it makes it worse and worse.

Expected behavior
No performance issue for couple of drop-downs

Minimal reproduction of the problem with instructions
Add a couple of dropdowns with 400+ elements.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.4.1
  

• PrimeNG version: 1.1.4
  

• Browser: [ Chrome ]

• Language: [TypeScript ]

• Node (for AoT issues): node --version = v6.9.1

[ASK83]

I saw the same issue with a listbox. I thought the problem might be the change detection runs of angular which is being triggered with mouse events. I rectified my problem by paginating my listbox or table.
However, I think this issue needs to be considered.

[devjamesg]

I have also noticed that the body click events applied OnInit on the dropdown and autocomplete as well as event propagation can lead to significant performance degradation. This issue was noted in https://github.com/primefaces/primeng/pull/734 . Dynamically adding and removing handlers increases performance significantly.

[zealitude]

I found the performance is worse in IE11 ....

[Scobee]

@devjamesg did this fix your issues entirely ? I notice a slight improvement with your changes, but still the page is veeery slow

[devjamesg]

There may be other factors - but the fix completely solves the issues for me. I am testing with 60 drop downs and autocompletes on a page tested in the following version.

Chrome
Version 55.0.2883.87 m

IE
Version 11,0.9600.18537CO

It went from seconds between clicks to almost instantaneous.

[variable-content]

A quick test that I did using the Chrome profiler showed that this line:
this.domHandler.scrollInView(this.itemsWrapper, this.domHandler.findSingle(this.panel, 'li.ui-state-highlight'));
within ngAfterViewChecked was responsible for the vast majority of the render time.

After removing that line and turning off autoWidth on the dropdown render times are much better.

[variable-content]

Finally, only rendering the ui-dropdown-items ul list when the panel is visible makes it really snappy when there's a large list of items.

i.e. changing:
<ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
to:
<ul *ngIf="panelVisible" class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">

[variable-content]

PR to fix this issue is ready to be reviewed: https://github.com/primefaces/primeng/pull/1785

[cagataycivici]

Should be fixed with 2.0.0.