Angular Material - mat-select stopped working for no apparent reason

Question

I have a mat-select component in one of my components as follows

<div id="graph-textbox">
    <input type="textbox" class="form-control" [(ngModel)]="graph1_query"
      placeholder="Search for Entities/Relations"
      (keyup)="EnterKeyupChecker('graph-search',$event)"
    >
</div>
<div style="padding-right: 5px" class="graph-dropdown">
    <mat-form-field appearance="fill" style="width: 100%;">
        <mat-label>Select Type</mat-label>
        <mat-select [(ngModel)]="graph1_type_query"
          (selectionChange)="graph1_subtype_query='';InGraph1Search();"
        >
            <mat-option value="">None</mat-option>
            <mat-option *ngFor="let type of type_dropdown" [value]="type">
                {{type}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

This mat-select was working perfectly till yesterday, showing the options and even performing the selection actions. When I began work on my Angular app today, it shows no options, and just highlights the mat-label when I click it. Absolutely nothing was changed in the code.

The value of graph1_type_query is '' on declaration in the .ts file and is not touched after that throughout the code. The value of graph1_query is working as intended.

What I've come across so far:

Using [(value)] instead of [(ngModel)]. Made no difference.
Checking that my type_dropdown array is actually populated. Logged it to the console as well as printed out the entire array in p tags (with the same ngFor loop) and it works, even changing along with the text input value (graph1_query) as intended.
I even replaced the mat-select with a simple example of mat-select but even this does not show any options.

<mat-select [(ngModel)]="graph1_type_query">
    <mat-option value="">None</mat-option>
    <mat-option value="One">One</mat-option>
    <mat-option value="Two">Two</mat-option>
    <mat-option value="Three">Three</mat-option>
</mat-select>

Checking compatibility of Angular and Angular Material
angular/core: 12.2.2
angular/material: 12.2.2
Also tried material versions 11.2.13 and 12.2.5
Using the placeholder attribute
Check if MatSelectModule has be imported in the App module file. I have other working mat-select components with similar code.

UPDATE: It work perfectly fine with native select. What could the issues with mat-select be?

Angular Material - mat-select stopped working for no apparent reason

0 Answers0