title: The default behaviour of mat select changes when I add a search bar
body: <p>So below is my code. What I am doing is showing all the available devices in a dropdown where multi select is allowed and also I have added a search field when devices count is more than 4. The default behaviour of mat-select is that when I select an option and close the dropdown, it opens on the selected option when I reopen it. But here it's not happening. It starts from the start. So I want that when I scroll and select last option, and when I reopen the dropdown the menu should be scrolled enough to show me the selected option.
  Is this default behaviour not working because I added a search bar?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="gatewayForm" autocomplete="off"&gt;
                          &lt;mat-form-field style="font-size:0.83em" class="no-arrow activity-log-field"&gt;
                              &lt;mat-select formControlName="gatewayCtrl" multiple disableOptionCentering panelClass="form-panel gpanel" name="Gateway" (openedChange)="checkChanged($event,'gatewayList')" (selectionChange)="gatewaySelectedClick($event)"&gt;
                                  &lt;mat-select-trigger&gt;
                                      {{selectedText}}
                                      &lt;span *ngIf="extratext!=null" class="example-additional-selection"&gt;
                                          {{extratext}}
                                      &lt;/span&gt;
                                  &lt;/mat-select-trigger&gt;
                                  
                                  &lt;mat-form-field *ngIf="gateways &amp;&amp; gateways.length&gt;4" class="organistation-searchField" appearance="outline"  [floatLabel]="'never'" aria-autocomplete="off" style="padding: 5px 8px 5px 8px;font-size: 13px"&gt;
                                      &lt;input #search autocomplete="off" formControlName="searchTerm" (keyup)="filterDevices($event.target.value,'gatewayList','gpanel');" (keydown)="$event.stopPropagation()" matInput placeholder="Search Device"&gt;
                                      &lt;mat-icon matSuffix style="color:#24539f;position: relative;top: 0.1em;"&gt;search&lt;/mat-icon&gt;
                                  &lt;/mat-form-field&gt;
                                  &lt;div class="panel-optn" style="max-height: 170px;"&gt;
                                      &lt;mat-option *ngIf="gateways &amp;&amp; gateways.length&gt;1" (click)="toggleAllSelection()" #allSelected class="gatewayList" [value]="allgateways"&gt;All devices&lt;/mat-option&gt;
                                      &lt;mat-option (click)="tosslePerOne(allSelected!=null?allSelected.viewValue:null)" class="gatewayList" *ngFor="let gateway of gateways" [value]="gateway"&gt;
                                          {{ gateway.panel_name }}
                                      &lt;/mat-option&gt;
                                  &lt;/div&gt;
                              &lt;/mat-select&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>