PrimeNG dropdown with virtual scroll not keeping selection in view PrimeNG dropdown with virtual scroll not keeping selection in view angular angular

PrimeNG dropdown with virtual scroll not keeping selection in view


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

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


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