Multi-select with cdk-virtual-for making it look like nothing was selected

I have a couple of angular material multi-selects that are utilizing the new Virtual for in the CDK.

When you select a couple of items and scroll them out of view, thus dropping them from the virtual for and then close the select, it looks like the inputs were dropped, but when opening up the select and scrolling back up you see they are still selected.

Here is an imgur album displaying my issue: https://i.sstatic.net/1Pm7a.jpg

The only workaround I've been able to come up with is that I can detect when the select is closed and reorder the selected items to the top of the list, as well as rest the virtual scroll.

Continue reading...