title: how to add mat select in Angular input
body: <p>I'm finding away to add mat select on my input field but some reason when I click on the arrow, it's not working and not showing me all the list.</p>
  
  <p>I have autocomplete and usually when a user start typing it show all the list to select but I'm trying add mat-select also so that user can just click on the arrow and select from the list without having to type something first.</p>
  
  <p>I've followed below stackblitz example ( checkbox is not needed for mine) but mine is little bit different and I also have text input and auto complete so I'm not sure why I can't type anymore in my input with current code and also the drop down list are not showing when I click the arrow.</p>
  
  <p>any suggestion or help will be really apprecaited. </p>
  
  <p><a href="https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html</a></p>
  
  <pre><code>    &lt;mat-form-field class="form" appearance="fill"&gt;
          &lt;mat-label&gt;Search or Select a Super Tag&lt;/mat-label&gt;
  
          &lt;mat-select [formControl]="superTags" multiple&gt;
              &lt;mat-select-trigger&gt;
                  &lt;mat-chip-list #chipList&gt;
                      &lt;div&gt;
                          &lt;mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
                              (removed)="remove(superTag)"&gt;
                              &lt;img class="super-icon" src="/assets/images/icons/super-tag-icon.svg"&gt;
                              {{superTag.tag}}
                              &lt;mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag"&gt;cancel&lt;/mat-icon&gt;
                          &lt;/mat-chip&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;input matInput  #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                              [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()"&gt;
  
                      &lt;/div&gt;
                  &lt;/mat-chip-list&gt;
                  &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)"&gt;
                      &lt;mat-option *ngIf="isLoading" class="is-Loading"&gt;
                          &lt;mat-spinner diameter="20"&gt;&lt;/mat-spinner&gt;
                      &lt;/mat-option&gt;
                      &lt;ng-container *ngIf="!isLoading"&gt;
                          &lt;mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag"&gt;
                              {{tag}}
                          &lt;/mat-option&gt;
                      &lt;/ng-container&gt;
                  &lt;/mat-autocomplete&gt;
              &lt;/mat-select-trigger&gt;
          &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/W3k5o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W3k5o.png" alt="enter image description here"></a></p>