防止多选下拉菜单在取消选择选项时关闭

Question

我有一个 primeng 多选下拉菜单：

<p-multiSelect
  [options]="stateList.items || []"
  [(ngModel)]="selectedStates"
  [ngModelOptions]="{ standalone: true }"
  optionLabel="name"
  optionValue="id"
  display="chip"
  (click)="onMultiSelectClick($event)"
  (mousedown)="onMultiSelectMouseDown($event)"
  (ngModelChange)="onMultiSelectChange($event)"
  placeholder="test">
</p-multiSelect>

效果很好；我可以打开它并选择“全选”复选框或一项一项地选择；问题是当我“取消选择”时，有时它会自动关闭下拉菜单，有时则不会......这只是奇怪的行为

如您所见，我尝试了多个事件来阻止它关闭：

onMultiSelectClick(event: Event) {
    this.isDropdownOpen = !this.isDropdownOpen;
  }

  onMultiSelectMouseDown(event: Event) {
    if (this.isDropdownOpen) {
      event.stopPropagation();
    }
  }

  onMultiSelectChange(event: any) {
    this.selectedStates = event;
    this.isDropdownOpen = false;
  }

  onItemDeSelect(event: Event) {
    event.stopPropagation();
  }

但没有一个奏效；当我想取消选择时（并非总是如此），它会一直关闭。有谁知道我怎样才能阻止它关闭？

Answer 1

解决此问题的一种方法是使用 OnHide。

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

而component.ts文件的变化就会是这样的。声明一个变量来处理它。以及它的功能。

isDropdownOpen: boolean = false;

onMultiSelectHide() {
  // Check if there are selected states
  if (this.selectedStates && this.selectedStates.length > 0) {
    // If there are selected states, keep the dropdown open
    this.isDropdownOpen = true;
  } else {
    // If no states are selected, close the dropdown
    this.isDropdownOpen = false;
  }
}

尝试一下这个方法，看看是否符合您的要求。请告诉我。