bug(MatSelect): MatSelectTrigger does not show the initial default value

[kiarash-malekzadeh]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have this code with mat-select which has a text inside the mat-select-trigger. When the component loads, it does not show this text or what ever value that is there. It will only show the value inside mat-select-trigger once we click on an option.
I need this because I want to show the previously selected and saved options on the mat-select (in form of mat-chip) so that the user would be able to see the previously selected options.
So placeholder text won't be useful here.

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    // The following Sample text or any dynamic value will not be displayed on the
    // initial run. It only shows the value if an option is selected from the
    // dropdown
    <mat-select-trigger> Sample text </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

Reproduction

StackBlitz link: https://stackblitz.com/edit/skhgptxb-m23a87cp?file=src%2Fexample%2Fselect-custom-trigger-example.html
Steps to reproduce:

1. Add mat-select-trigger to mat-select
2. Add any hard coded or dynamic values to the mat-select-trigger like "Sample text" or {{ someValue }}

Expected Behavior

Expected behaviour is to be able to see the initial default values inside mat-select-trigger without the need to click on the options. This is mainly to be able to show the previously selected options (ideally in the form of chips with mat-chip). So we can't do that with a placeholder.
Ideally I want to be able to do this:

<mat-select-trigger>
    <div class="chips">
        @for (option of options; track $index) {
        <mat-chip (removed)="removeOption(option)">
            {{ option.title }}
            <button matChipRemove>
                <mat-icon>remove_circle_outline</mat-icon>
            </button>
        </mat-chip>
        }
    </div>
</mat-select-trigger>

And be able to see the options as chips in the trigger part.

Actual Behavior

Any hard coded or dynamic values inside the mat-select-trigger won't show on the initial load.
If we click on any options it will be shown

Environment

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

[crisbeto]

This is working as expected. The trigger is shown only when there's a value, otherwise it shows either the label or the placeholder.

[kiarash-malekzadeh]

@crisbeto There actually is a value. "Sample text" is a value, isn't it? But it does not show it. Same for dynamic values.

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