How to force the Custom Trigger Text to update on multi MatSelect?

[omaracrystal]

What are you trying to do?

I created a reusable component that utilizes Material Multi Select.

What it does: It allows user to search the option results if there are more than 5 options.

The problem is that the Custom Trigger Text does not update when you search and uncheck all filtered results. I'm unsure of the exact reason, but I assume that Material is checking the selectionChange event's results (which are none) and doesn't know to update? Since I cannot rely on the results to be accurate from this selectionChange, I am overriding this by setting the selected variable within the component with the correct selected results. As long as there is one checked box that is visible to the user, the Custom Trigger Text updates as expected.

What are you trying to do?

I would like to FORCE the Custom Trigger Text to show the correct selected results (even if it's not visible to the user due to filtering from search)

What troubleshooting steps have you tried?

I have tried to research how to force this Custom Trigger to show the Selected results however I've been unsuccessful.
I have found that others have tried to do something similar such as here --> #7758

What are you seeing that does not match your expectations?

I would like to see the correct #of selected results in the Custom Trigger Text not the Placeholder (which should only show if there are 0 selected results)

Reproduction

• Code here on StackBlitz: https://stackblitz.com/edit/angular-mat-select-multi-with-formcontrol-x2tbvo?file=app%2Fselect-search-dropdown.component.ts

Steps to reproduce:

1. Notice that it shows the Preselected Custom Trigger Text "3 selected"
2. Click on the dropdown
3. Search for "Fox"
4. Uncheck that option and blur away from input.
5. Notice that the Custom Trigger Text shows the placeholder="Select Animal(s)" Instead of Custom Trigger Text "2 selected"
6. The event emitter shows that indeed that there are two selected results.
7. If you click back into the search and clear the results you will see the Custom Trigger Text "2 selected" appear...

^^^ I'm assuming that Angular's logic checks the selectionChange results and see's it as none right?

• I would like to override this behavior.

Environment

Angular: 10.2.1
CDK/Material: 10.2.4
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): macOS

NOTE: As a work around:

I am adding logic to change the placeholder text if selected.length > 0 and adding a custom class to mat-select in order to style it to make it appear it's not the placeholder text but the custom trigger text.

[crisbeto]

I think the problem here is that the select isn't really built for filtering list this. The custom trigger is shown based on the empty value which in turn depends on the number of options in the DOM and whether any of them have been selected. When you filter out the options, the select thinks that it's empty so it shows the placeholder instead of the trigger. We have a feature request for this already at #5697.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}