如何在所选选项上打开 mat-select

Question

所以这是 mat-select 的默认行为（选择的选项直接打开），这就是我的代码给出的，因为我将 mat-option 字段包含在 div 标签中（用于样式目的）

下面是我的代码

组件.html

<mat-select [(value)]="selectedGroup" class="text-head" required panelClass="headerPanel">                  
    
    <mat-form-field *ngIf="groupList.length>4" class="organistation-searchField" appearance="outline">
        <input (keydown)="$event.stopPropagation()" [(ngModel)]="searchTerm" matInput (ngModelChange)="_globals.dropdownSearch($event,'group_list','headerPanel')" placeholder="Search Zone">
        <mat-icon matSuffix style="color:#24539f;">search</mat-icon>
    </mat-form-field>

    <div class="panel-optn" style="max-height:190px;">
        <mat-option class="group_list" *ngFor="let group of groupList" [value]="group.group_id">
            {{group.name}}
        </mat-option>
    </div>    
</mat-select>

组件.css

.panel-optn{
   overflow-y: auto;
   scrollbar-color: slategrey rgba(0,0,0,0.3); /* thumb and track color */
   scrollbar-width: thin;
}

.panel-optn::-webkit-scrollbar {
   width: 0.5em;
 }


.headerPanel{
   position: relative;
   top: 40px;
   overflow-y: hidden !important;
   left: -8%;
   max-width: 235px !important;
}

在 mat-select 上使用 panel-optn 类并删除 div 标签可以解决问题。 但我不能这样做，因为那样搜索栏就不会固定在顶部。 有没有办法恢复默认行为？

Answer 1

所以它不会在选择打开时滚动到最后一个选定的元素。

我会尝试使用某种基于 scrollTo 方法的指令来覆盖它