Mat-Select only opening when clicked on bottom line

Question

I implemented Mat-Select from Angular material (TS) and noticed interesting behavior. Dropdown not opening until clicked on bottom line of mat-select and I know when I worked before with Mat-select field it was opening when I clicked anywhere on field. What is the problem?

  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{
        topping
      }}</mat-option>
    </mat-select>
  </mat-form-field>

Answer 1

From documentation https://material.angular.io/components/select/overview

---

might be a cache issues or the dynamic data must be loading late (adding a condition might help)

Stackblits-
https://stackblitz.com/angular/rdlobdgvqok?file=src%2Fapp%2Fselect-overview-example.ts

<h4>Basic native select</h4>
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

this will surely solve your issues