Value of mat-select field invisible when using mat-autocomplete in the same component

I am using Angular 19 with Angular Material. I have six mat-form-fields which each containing a mat-select. I am setting a deafult value for those fields via their form control's setValue option. Everything works as expected: One of the six mat-form-fields:

<mat-form-field appearance="outline">
<mat-label for="kg_lieferungEnum">{{ "Einheit" | translate }}</mat-label>
<mat-select formControlName="kg_lieferungEnum" id="kg_lieferungEnum">
@for (kg_lieferung of kg_lieferungList; track kg_lieferung) {
<mat-option [value]="kg_lieferung.id">{{ kg_lieferung.label | translate }}</mat-option>
}
</mat-select>
</mat-form-field


I set the Value via its formCntrol inside ngOnInit: this.formData.get(enumValue)?.patchValue("kg"); But when i add a mat-form-field with mat-autocomplete, the preselected values in the mat-selects suddenly become invisible. Its not that there not being loaded, when i click on the input-field the become visible.enter image description hereenter image description here When i remove the mat-autocomplete again it works again as expected. the mat autocompletes's HTML:

<mat-form-field appearance="outline">
<mat-label for="verpackungs_artEnum">{{ "Verpackungsart" | translate }}</mat-label>
<input
matInput
type="text"
id="verpackungs_artEnum"
formControlName="verpackungs_artEnum"
[matAutocomplete]="auto_verpackungs_art"
>
<mat-autocomplete #auto_verpackungs_art="matAutocomplete" [displayWith]="displayAutocompleteEnumLabel">
@for (verpackungs_art of filtered_verpackungs_artList | async; track verpackungs_art) {
<mat-option [value]="verpackungs_art.id">{{ verpackungs_art.label }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>

the implementation of filtered_verpackungs_artList in the ts file:
this.filtered_verpackungs_artList = this.formData.get("verpackungs_artEnum")!.valueChanges.pipe(
startWith(''),
map(value => {
const label = typeof value === 'string' ? value : value?.label;
return label ? this._filter(label as string, this.verpackungs_artList) : this.verpackungs_artList.slice();
}),
);


the _filter is not inside the ngOnInit:

private _filter(label: string, enumList: Enum[]): Enum[] {
const filterValue = label.toLowerCase();
return enumList.filter(enumItem => enumItem.label.toLowerCase().includes(filterValue));
}


the displayWith functions looks the like following:

displayAutocompleteEnumLabel(enumItem: Enum): string {
return enumItem && enumItem.label ? enumItem.label : ""
}


both, "verpackungs_art" and "kg_lieferung" are of type Enum with the following interface:

export interface Enum {
id: string,
label: string,
language: string,
value: number,
enumCode: string,
createdAt: Date,
updatedAt: Date,
}


and the Lists in the for loop are of the same type but an array. both lists get their data from a backend. i have absolutely no clue on how to solve this.

i my view this has something to do with the async function the the mat-autocomplete field. i found two cases with seemed to have the same error, the github one with a stackblitz link that also shows this error: https://github.com/angular/components/issues/7923 Angular mat-select invisible until you click on it, how to set a default value i appreciate your help!

Continue reading...