Angular PrimeNG侧边栏中mat-autocomplete下拉层级异常问题

在Angular项目中同时使用PrimeNG与Angular Material组件库，将原本运行正常的mat-autocomplete组件放入PrimeNG的p-sidebar后，点击输入框时下拉选项会显示在侧边栏下方或后方，无法与输入控件处于同一层级。

相关代码 #

Autocomplete组件代码 #

<mat-form-field class="example-full-width">
  <mat-label>Number</mat-label>
  <input type="text"
         placeholder="Pick one"
         aria-label="Number"
         matInput
         [formControl]="myControl"
         [matAutocomplete]="auto">
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    @for (option of filteredOptions_ | async; track option) {
      <mat-option [value]="option">{{option}}</mat-option>
    }
  </mat-autocomplete>
</mat-form-field>

PrimeNG侧边栏代码 #

<div class="card flex justify-content-center">
  <p-sidebar modal="false"  #sidebarRef [(visible)]="sidebarVisible" [style]="{width:'80%'}">
    <ng-template pTemplate="header">
      <div class="flex align-items-center gap-2">
        <span class="font-bold">
          <i class="pi pi-face-smile"></i>
          User managments
        </span>
      </div>
    </ng-template>
    <div class="row grid">
      <div class="col-3" style="background-color: #fff;">
        <!-- SOME CONTROLS -->
      </div>
      <div class="col-9" id="hello-component-host" style="background-color:#d9d9d938;">
        <ng-template #injectedComponentHere></ng-template> 
      </div>
    </div>
  </p-sidebar>
</div>

解决方案 #

1. 自定义Autocomplete面板层级 #

给mat-autocomplete添加自定义面板类，通过全局样式强制提升下拉列表的z-index，确保其层级高于侧边栏：

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [panelClass]="'sidebar-autocomplete-panel'">
  <!-- 选项内容 -->
</mat-autocomplete>

在全局样式文件（如styles.scss）中添加：

.sidebar-autocomplete-panel {
  z-index: 9999 !important;
  position: fixed !important; /* 脱离侧边栏的overflow限制 */
}

2. 修改侧边栏的overflow属性 #

PrimeNG侧边栏默认可能设置了overflow: auto/hidden导致下拉列表被裁剪，可针对侧边栏内容区域修改：

.p-sidebar-content {
  overflow: visible !important;
}

若需要保留侧边栏内部滚动，建议仅给包含Autocomplete的容器设置overflow: visible，避免影响其他区域。

3. 配置CDK Overlay锚定策略 #

通过Angular CDK的Overlay配置，让下拉列表锚定在输入框下方，并适配侧边栏滚动：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { Overlay } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-autocomplete',
  templateUrl: './your-autocomplete.component.html',
})
export class YourAutocompleteComponent implements AfterViewInit {
  @ViewChild('auto') autocomplete!: MatAutocomplete;

  constructor(private overlay: Overlay) {}

  ngAfterViewInit() {
    this.autocomplete.overlayDir?.updatePositionStrategy(
      this.overlay.position()
        .flexibleConnectedTo(this.autocomplete.inputElement.nativeElement)
        .withPositions([{
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: 'top',
        }])
        .withScrollableContainers([document.querySelector('.p-sidebar-content')])
    );
  }
}

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