When selection is empty, placeholder only reappears when clicked on custom MatSelect with multiple selection

[alessandrojcm]

Bug, feature request, or proposal:

I've implemented a custom MatSelect according to the docs. But, if I select and then deselect the options (thus leaving the MatSelect empty) the placeholder only reappears when the component is clicked again.

What is the expected behavior?

Placeholder should stop floating and appear in its starting position.

What is the current behavior?

Placeholder only reappears when I click the component again.

What are the steps to reproduce?

Here's a Stackbliz

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.2.4, Angular Material 5.2.4, Ubuntu 17.10 and Windows 10, Firefox 58 and Chrome 65; TypeScript 2.7 in my dev machine, not sure which version in Stackbliz

Is there anything else we should know?

Already tried the steps in issue #3196

[crisbeto]

The issue comes from the fact that you've wrapped the select in another component which isn't reacting to all the state changes. You can fix your component by adding this:

this.filterSelect.stateChanges.subscribe(() => {
  this.stateChanges.next();
});

[alessandrojcm]

That did it, thanks a lot.

[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.}