Ng-zorro hover触发Popover遇Select下拉菜单自动关闭问题求助

问题描述 #

使用hover触发Ng-zorro Popover后，点击其中的Select组件并悬停下拉选项时，Popover会自动关闭，且无法改用click触发方式替代hover，需要可行的修复方案。

重现步骤 #

• 鼠标悬停触发按钮，显示Popover
• 点击Popover内的Select组件展开下拉菜单
• 悬停下拉菜单中的任意选项

预期/实际结果 #

• 预期：Popover保持可见，可正常选择下拉选项
• 实际：Popover直接消失

环境信息 #

• ng-zorro-antd版本：16.2.0
• 浏览器：Firefox、Edge

可行解决办法 #

方案一：手动控制Popover显示状态+延迟关闭 #

核心思路是监听Select下拉的展开/收起状态，强制Popover在下拉打开时保持显示，同时给Popover的关闭添加延迟，避免误触发。

模板代码

<nz-popover
  nzTrigger="hover"
  nzMouseLeaveDelay="500"
  [(nzVisible)]="isPopoverVisible"
  (nzMouseleave)="handlePopoverLeave()"
  nzContentTemplate="popoverContent"
>
  <button nz-button>Hover触发</button>
  <ng-template #popoverContent>
    <nz-select
      [(ngModel)]="selectedOption"
      (nzOpenChange)="handleSelectOpen($event)"
    >
      <nz-option nzValue="opt1" nzLabel="选项1"></nz-option>
      <nz-option nzValue="opt2" nzLabel="选项2"></nz-option>
      <nz-option nzValue="opt3" nzLabel="选项3"></nz-option>
    </nz-select>
  </ng-template>
</nz-popover>

组件逻辑代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  isPopoverVisible = false;
  selectedOption = '';
  private isSelectDropdownOpen = false;

  handleSelectOpen(open: boolean): void {
    this.isSelectDropdownOpen = open;
    // 下拉展开时强制显示Popover
    if (open) {
      this.isPopoverVisible = true;
    }
  }

  handlePopoverLeave(): void {
    // 只有当下拉关闭时，才延迟关闭Popover
    if (!this.isSelectDropdownOpen) {
      setTimeout(() => {
        if (!this.isSelectDropdownOpen) {
          this.isPopoverVisible = false;
        }
      }, 500);
    }
  }
}

方案二：调整样式使下拉菜单纳入Popover hover范围 #

通过修改样式，让Select的下拉菜单被Popover的hover判定包含，避免鼠标移到下拉时触发Popover的mouseleave事件。

1. 给Popover添加自定义覆盖类：

<nz-popover nzOverlayClassName="popover-with-select" ...>
  <!-- 内容省略 -->
</nz-popover>

2. 在全局样式文件中添加：

.popover-with-select .ant-select-dropdown {
  /* 让下拉菜单的鼠标事件冒泡到Popover容器 */
  pointer-events: none;
}
.popover-with-select .ant-select-dropdown * {
  /* 恢复下拉选项的交互能力 */
  pointer-events: auto;
}

注：该方案需测试兼容性，部分场景下可能影响Select的正常交互。

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