Group support with Dropdown VirtualScroll

[mu5er]

I'm submitting a ...

[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

Current behavior When 'group' option is true, 'virtualScroll' option creates 'cdk-virtual-scroll-viewport' element for each group.

Expected behavior There should be one 'cdk-virtual-scroll-viewport' containing all the groups 'li' elements.

• Angular version: 7.X

• PrimeNG version: 7.X

• Browser: all

• Language: TypeScript

[mu5er]

I have no access to plunker or stackblitz at the moment, but here's a screenshot

[RunnersReign]

Is there any idea when this enhancement will be worked on? It would be nice to improve the render performance of dropdowns with large groups.

[t-cadei]

Is there any idea when this enhancement will be worked on? It would be nice to improve the render performance of dropdowns with large groups.

Hell yeah !

[kbl212]

I am also running into this issue with virtualScroll...any workaround available while still using [group]="true"?

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[jakob-bebop]

+1 for reopening... The combination of virtualscroll + group breaks the dropdown (v15.0.1). You can verify this by going to

https://primeng-dropdown-demo.stackblitz.io

and modify app.component.html

<h5>Group</h5>
<p-dropdown
  [options]="groupedCities"
  [(ngModel)]="selectedCity3"
  placeholder="Select a City"
  [group]="true"
  [virtualScroll]="true"
  itemHeight="30"
>
  <ng-template let-group pTemplate="group">
    <div class="p-d-flex p-ai-center">
      <span>{{ group.label }}</span>
    </div>
  </ng-template>
</p-dropdown>

[HarryWang74]

+1 for reopening... The combination of virtualscroll + group breaks the dropdown (v16.0.1).

[lixaotec]

+1