如何阻止PrimeNG多选下拉框取消选择时自动关闭？

问题分析 #

你遇到的取消选项时下拉框偶尔自动关闭的问题，本质是组件内部状态和你手动维护的isDropdownOpen存在冲突，且之前的事件监听没覆盖到取消选择时的内部状态更新逻辑。

解决方案 #

直接利用PrimeNG MultiSelect自带的状态控制属性和事件，替换你之前的手动逻辑：

1. 修改模板代码

移除之前的click、mousedown事件绑定，添加组件内置的overlayVisible双向绑定和onUnselect事件：

<p-multiSelect
  [options]="stateList.items || []"
  [(ngModel)]="selectedStates"
  [ngModelOptions]="{ standalone: true }"
  optionLabel="name"
  optionValue="id"
  display="chip"
  [(overlayVisible)]="isDropdownOpen"
  (onUnselect)="onItemUnselect($event)"
  placeholder="test">
</p-multiSelect>

2. 调整组件逻辑

删除之前的onMultiSelectClick、onMultiSelectMouseDown等冗余方法，保留核心的取消选择处理：

isDropdownOpen = false;

onItemUnselect(event: any) {
  // 延迟设置确保覆盖组件内部的状态更新
  setTimeout(() => {
    this.isDropdownOpen = true;
  }, 0);

  // 可选：阻止事件冒泡触发组件内部的关闭逻辑
  const domEvent = event.originalEvent;
  if (domEvent) {
    domEvent.stopPropagation();
  }
}

为什么之前的方法无效？ #

• 手动维护的isDropdownOpen和组件内部的下拉状态存在竞态，组件在取消选择时会自动更新自身显示状态，你的手动设置会被覆盖
• 之前监听的click、mousedown事件没有精准命中取消选择时的触发逻辑，无法阻止组件内部的关闭流程

额外提示 #

如果需要保留全选/反选后下拉框不关闭的逻辑，可以同时监听onSelect事件，同样在回调里强制设置isDropdownOpen = true。

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