mat-autocomplete下拉框拖动模态窗口时不跟随移动的解决方法

问题原因 #

mat-autocomplete的下拉建议框默认挂载在全局的cdk-overlay-container容器中，与模态窗口的DOM层级相互独立，因此拖动模态窗口时，下拉框无法同步跟随移动。

解决方案 #

方案一：将下拉框附加到拖动容器

通过connectedTo属性将autocomplete的下拉框绑定到拖动容器，再配合CSS确保定位正确：

1. 修改HTML结构，添加模板引用变量并配置autocomplete：

<ng-container #dragContainer cdkDrag cdkDragRootElement=".cdk-overlay-pane">
  <mat-form-field>
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete 
      #auto="matAutocomplete" 
      [connectedTo]="dragContainer" 
      overlayPanelClass="autocomplete-attached"
    >
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</ng-container>

2. 添加CSS样式：

.autocomplete-attached {
  position: absolute !important;
}

方案二：监听拖动事件同步下拉框位置

通过监听cdkDrag的拖动事件，实时更新autocomplete下拉框的位置：

1. 组件类中添加事件处理逻辑：

import { Component, ViewChild } from '@angular/core';
import { CdkDragMove } from '@angular/cdk/drag-drop';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('auto') autocomplete!: MatAutocomplete;

  onDragMoved(event: CdkDragMove) {
    if (this.autocomplete.isOpen) {
      const overlayRef = this.autocomplete._overlayRef;
      if (overlayRef?.getConfig().positionStrategy) {
        overlayRef.getConfig().positionStrategy.apply();
      }
    }
  }
}

2. HTML中绑定拖动事件：

<ng-container 
  cdkDrag 
  cdkDragRootElement=".cdk-overlay-pane" 
  (cdkDragMoved)="onDragMoved($event)"
>
  <mat-form-field>
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</ng-container>

方案说明 #

• 方案一实现简单，适合大多数场景，但需注意CSS定位的兼容性，避免下拉框超出容器范围。
• 方案二更灵活，能实时同步位置，但依赖_overlayRef私有属性，若Angular Material版本更新，建议优先使用官方公开API替代。

内容的提问来源于stack exchange，提问作者anupamb