Angular cdkFocus在对话框背景上触发初始焦点

Question

我们在对话框内的一些输入元素上使用

cdkFocusInitial

来覆盖默认焦点，例如：

<mat-form-field class="address-field" *ngIf="!createNewAddress">
  <mat-select #deliveryAddress placeholder="{{ 'order.dialog.create.details.label.delivery-address' | translate:locale.language }}" [attr.cdkFocusInitial]="filteredAddresses.length > 1 ? true : null" (focus)="expandDeliveryAddress($event)"
                (selectionChange)="handleAddressChangesInSelectList($event)" formControlName="deliveryAddress" tabindex="0">
    <mat-option class="address-option" *ngFor="let address of filteredAddresses; let i = index" [value]="address">
      <div class="address-option-div">
        <div class="address-text"><h5>{{ address.firstName }} {{ address?.secondName }} {{ address?.thirdName }} </h5></div>
        <div class="addresses"><h6>{{ address.street }}, {{ address.streetNumber }}, {{ address.zipCode }}, {{ address.city }}, {{ address.country.name }}</h6></div>
      </div>
    </mat-option>
  </mat-select>
</mat-form-field>

扩展送货地址功能：

expandDeliveryAddress(): void {
    if (this.addresses.length > 1) {
        this.deliveryAddress.open();
    }
}

这按预期工作。当有多个可用地址时，下拉列表会展开，如果只有一个可用地址，则会自动选择（此处未显示）。

但是当点击背景时也会调用

expandDeliveryAddress

。更好地说

(focus)

是因为这也发生在正常的

mat-input

字段上。 我不知道如何防止这种情况。我检查了事件对象发送，但没有任何东西可以帮助我查找该事件是否是背景单击。

希望有人能帮助我。

Answer 1

如果您想防止单击背景时触发

expandDeliveryAddress

，您可以使用

Event

属性和标志的组合来跟踪背景是否被单击。具体方法如下：

export class YourComponent {
  private backdropClicked = false;

  expandDeliveryAddress(event: MouseEvent): void {
    if (!this.backdropClicked && this.addresses.length > 1) {
      this.deliveryAddress.open();
    }

    this.backdropClicked = false; // Reset flag after use
  }

  backdropClickHandler(): void {
    this.backdropClicked = true;
  }
}

在模板中，您应该向背景元素添加一个

(click)

事件监听器：

<mat-dialog-container (click)="backdropClickHandler()">
  <!-- Your dialog content -->
</mat-dialog-container>