title: The carret behaviour on autocomplete breaks the component logic
body: <p>I have a self-written autocomplete component, that uses mat-option.
  There is a bug - when I choose something from the list, the carret goes at the bottom of the list. So a user appears at the bottom of the list and loses his previous position.</p>
  <pre><code>  &lt;mat-form-field&gt;
      &lt;mat-select [(ngModel)]=&quot;item.selectedValues&quot;
                  (openedChange)=&quot;onSelectPanelToggle($event); setFocus()&quot;
                  [placeholder]=&quot;title&quot;
                  multiple
                  [ngClass]=&quot;{'caret-hidden': isCaretHidden}&quot;&gt;
        &lt;div style=&quot;display: flex;&quot; class=&quot;search-bar--border&quot;&gt;
          &lt;input  class=&quot;filter-items__search-bar&quot;
                  matInput
                  type=&quot;text&quot;
                  autocomplete=&quot;off&quot;
                  (input)=&quot;item.filter($event.target.value)&quot;
                  (keydown)=&quot;preventSpaceHandle($event)&quot;
                  (keyup)=&quot;preventSpaceHandle($event)&quot;
                  placeholder=&quot;Поиск&quot;
                  [(ngModel)]=&quot;searchPattern&quot;
                  #inputBox
                  name=&quot;searchPattern&quot;&gt;
          &lt;button mat-icon-button type=&quot;button&quot;
                  (click) = &quot;searchPattern = '';item.filter(''); setFocus()&quot;
                  class=&quot;icon-clear&quot; style=&quot;top: 3px;&quot;&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;mat-select-trigger class=&quot;filter-items__label-wrapper&quot;&gt;
          &lt;div class=&quot;filter-items__label&quot;
                *ngFor=&quot;let select of item.selectedValues; trackBy: trackById&quot;
                [ngClass]=&quot;select.styleClass&quot;&gt;{{select.label}}&lt;/div&gt;
          &lt;button mat-icon-button
                  type=&quot;button&quot;
                  *ngIf=&quot;item.selectedValues.length&quot;
                  (click)=&quot;onClear($event)&quot;
                  class=&quot;icon-clear icon-clear_list&quot;&gt;&lt;/button&gt;
        &lt;/mat-select-trigger&gt;
        &lt;div *ngIf=&quot;item.items.length === 0&quot; style=&quot;height: 36px;&quot;&gt;
          &lt;span style=&quot;margin-left: 15px; line-height: 30px;&quot;&gt;Нет данных&lt;/span&gt;
        &lt;/div&gt;
        &lt;mat-option *ngFor=&quot;let option of item.items; trackBy: trackById; let i=index&quot;
                    [hidden]=&quot;!item.isFiltered(option)&quot;
                    (click)=&quot;onChange(option.id)&quot;
                    [ngClass]=&quot;option.styleClass&quot;
                    [value]=&quot;option&quot;
                    [matTooltip]=&quot;option.label&quot;
        &gt;{{option.label}}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  <p>I recorded a video where possible to see it clear.
  <a href="https://www.youtube.com/watch?v=3fGVPpzVpeI" rel="nofollow noreferrer">https://www.youtube.com/watch?v=3fGVPpzVpeI</a></p>