Question

所以下面是我的代码。我正在做的是在允许多选的下拉列表中显示所有可用设备，并且当设备数量超过4时，我还添加了一个搜索字段。mat-select的默认行为是当我选择一个选项并关闭时下拉菜单中，当我重新打开它时，它会在所选选项上打开。但是，这没有发生。它从头开始。因此，我希望在我滚动并选择上一个选项时，并且在我重新打开下拉菜单时，菜单应该滚动到足以向我展示所选选项。因为我添加了搜索栏，所以这种默认行为不起作用吗？

<form [formGroup]="gatewayForm" autocomplete="off">
                        <mat-form-field style="font-size:0.83em" class="no-arrow activity-log-field">
                            <mat-select formControlName="gatewayCtrl" multiple disableOptionCentering panelClass="form-panel gpanel" name="Gateway" (openedChange)="checkChanged($event,'gatewayList')" (selectionChange)="gatewaySelectedClick($event)">
                                <mat-select-trigger>
                                    {{selectedText}}
                                    <span *ngIf="extratext!=null" class="example-additional-selection">
                                        {{extratext}}
                                    </span>
                                </mat-select-trigger>
                                
                                <mat-form-field *ngIf="gateways && gateways.length>4" class="organistation-searchField" appearance="outline"  [floatLabel]="'never'" aria-autocomplete="off" style="padding: 5px 8px 5px 8px;font-size: 13px">
                                    <input #search autocomplete="off" formControlName="searchTerm" (keyup)="filterDevices($event.target.value,'gatewayList','gpanel');" (keydown)="$event.stopPropagation()" matInput placeholder="Search Device">
                                    <mat-icon matSuffix style="color:#24539f;position: relative;top: 0.1em;">search</mat-icon>
                                </mat-form-field>
                                <div class="panel-optn" style="max-height: 170px;">
                                    <mat-option *ngIf="gateways && gateways.length>1" (click)="toggleAllSelection()" #allSelected class="gatewayList" [value]="allgateways">All devices</mat-option>
                                    <mat-option (click)="tosslePerOne(allSelected!=null?allSelected.viewValue:null)" class="gatewayList" *ngFor="let gateway of gateways" [value]="gateway">
                                        {{ gateway.panel_name }}
                                    </mat-option>
                                </div>
                            </mat-select>
                        </mat-form-field>
                    </form>

Answer 1

Production

这应该使下拉菜单集中在您选择的元素上。

包括您选择的选项的值，例如

this.yourElementHere.focus();

Answer 2

所以问题是由div标签内的mat-option引起的。我删除了它，然后直接通过panelClass在mat-select上应用了样式。

添加搜索栏时，垫选择的默认行为会发生变化

2 个答案: