title: How to prevent mat-select jump to selected value on value selection?
body: <p>I want my mat-select to not jump to the selected value when I click on it.</p>
  
  <p>The problem is that I made optgroups collapsable with my custom toggleExpansion method and when I select an option with a collapsed optgroup, it jumps to the postion of the value before the collapse happened.</p>
  
  <p>I tried set the mat-option height to 0px but it still jumps to the theoretical position of the option</p>
  
  <p>my mat-select code : </p>
  
  <pre><code>&lt;mat-form-field &gt;
    &lt;mat-select  [(value)]="tPres" [compareWith]="comparer" (selectionChange)="getSelectedValue($event)" multiple #mySelect &gt;
      &lt;mat-select-trigger&gt;
        {{tPres?.length}} / {{nbPresta}}
      &lt;/mat-select-trigger&gt;
      &lt;ng-container *ngFor="let t of typePrestations"&gt;
        &lt;mat-checkbox color="primary" [checked]="isChecked(t)" [indeterminate]="isIndeterminate(t)" (change)="toggleSelection(t, $event)"&gt;&lt;/mat-checkbox&gt;
        &lt;span (click)="toggleExpansion($event)" class="material-icons"&gt; expand_less &lt;/span&gt;
        &lt;mat-optgroup   [label]="t.Code + ' - ' + t.Libelle"&gt;
          &lt;mat-option  *ngFor="let y of t.Prestation" [(value)]="y"&gt;
            {{y.Libelle}}
          &lt;/mat-option&gt;
        &lt;/mat-optgroup&gt;
      &lt;/ng-container&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>the toggleExpansion method : </p>
  
  <pre><code>toggleExpansion(event) {
      if (event.target.innerText == "expand_less") {
        event.target.innerText = "expand_more";
        event.target.nextElementSibling.childNodes.forEach(e =&gt; {
          if (e.tagName == "MAT-OPTION") {
            e.style.height = "0px";
          }
        });
      } else {
        event.target.innerText = "expand_less";
        event.target.nextElementSibling.childNodes.forEach(e =&gt; {
          if (e.tagName == "MAT-OPTION") {
            e.style.height = "";
          }
        });
      }
    }
  </code></pre>
  
  <p><strong>EDIT</strong> : I found out a way to do so. </p>
  
  <p>I added a viewchild on my <code>mat-select</code> and I overrode its <code>_onSelect()</code> method with nothing in <code>ngOnInit()</code> :</p>
  
  <p>the method is found in <em>node_modules/@angular/material/esm5/select.es5.js</em></p>
  
  <pre><code>@ViewChild('mySelect')   private prestationSelect: MatSelect; 
  
  ngOnInit(){ (&lt;any&gt; this.mySelect)._onSelect = () =&gt; {
  
  //The code goes here, I just commented the following line in the method:
  //if (isUserInput) { this._keyManager.setActiveItem(option);}
      }
  </code></pre>