PrimeNG dropdown with virtual scroll not keeping selection in view

Question

I am making use of the PrimeNG drop down component with custom filtering and virtual scroll enabled.

I am finding the component is not scrolling back to the last selection made in the list of items in view when it's re-opened, instead it just scrolls back to the top of the list meaning you have to physically scroll to go find the selection made.

See this example stackblitz

I did come across a solution here that talks about calling scrollToIndex on a CdkVirtualScrollViewport instance which sound like it could be of use for me. But when I attempted to incorporate this in my code, my instance variable comes up as undefined.

Does anyone know what the correct approach is here? I am using PrimeNG 7.1.3.

Thanks

Scabby

Answer 1

This is due to this issue which has been solved in version 8.0.1 with this PR. So upgrade primeng to resolve this issue.

I have also opened another issue stating further issues relating to keeping the selected item in view, and proposed a fix PR, when this PR is merged all issues to keep the selection in view will be resolved.

Regulable

Answer 2

I do not think there is anyway to solve this without PrimeNG modifying their components to add a scroll method on the dropdown component, or even better, a property to decide wether the selected item should be automatically scrolled to when the dropdown opens. (Or maybe it should even always be doing that, like for non virtual mode)

Explanation

Using ViewChild (say on componentA) (even with forwardRef like you did) will never work, as it can only access direct child components from the componentA's template (the one containing the dropdown), but it cannot access children from the child component's template (i.e. the PrimeNG dropdown component itself).

Same thing using ContentChild and this is by design

What you've got in your example is a grandparent component (AppComponent), a child (Dropdown) and a grand child (CdkVirtualScrollViewport).

Most answers from SO to access a grandchild component from a grand parent component suggest:

• add a @ViewChild(GrandChildComponent) grandChild in the child component
• add a @ViewChild(ChildComponent) child in the grandparent component
• from the grandparent, using this.child.grandChild to access the grandchild

But this will not work here as the child component is a 3rd party component over which you do not have control. So that's why I think it's best if you suggest that improvement to PrimeNG

Dealate

OK thanks David for your feedback and suggestions, I will raise with the PrimeNG team and see if they respond – Scabby