Angular Material multi select component with virtual-scroll

Question

I'm trying to create a custom multi select component, based on the angular-material select component (v10), with virtual-scroll and a custom search input inside the component's overlay. I also added a mat-select-trigger element to display the number of selected items, instead of the default list of selected items.

The (almost fully working and without styling) example is available in this stackblitz.

The issue I'm having is related with the displayed value of the selected items.

To replicate the issue you have to:

1. Search in the list of items (e.g.: 55) and select an option (e.g. item-55)
2. Click outside of the overlay, to close it
3. As expected, the component will display 1 selected and the item will be listed in the Selected items list below
4. Re-open the list, click in the search field clear button and then click outside the overlay, to close it again

The component will now display the Items placeholder, when it should be displaying 1 selected, since the item is still in the Selected items list (and it's this list that it's used in the mat-select-trigger element).

Nonetheless, if you re-open the list and scroll to the selected item (item-55), it will be selected. If you then click outside the overlay to close it again, the correct value will be displayed (1 selected).

I understand it's a virtual-scroll related issue, but I've been unable to find a solution or workaround for this.

Any suggestions would be greatly appreciated!