ng-select多选组件达选择上限后无法打开下拉框的问题求助

当ng-select多选组件设置maxSelectedItems后，若选中项达到上限，会出现下拉框无法打开的情况，导致无法手动取消已选选项。可以通过以下方式解决：

1. 覆盖默认CSS样式，确保下拉触发区域可点击 #

ng-select达到选择上限后会给组件添加aria-disabled=true属性，限制触发区域点击。通过CSS移除这个限制：

.ng-select[aria-disabled=true].ng-select-multiple {
  pointer-events: auto !important;
}

添加后，即使达到选择上限，点击下拉框仍能展开选项列表，已选中的选项可正常取消勾选。

2. 手动控制下拉框展开状态 #

通过绑定isOpen属性，自定义控制下拉框的显示逻辑：

修改模板代码 #

<label>Multiselect with custom bindings</label>
<ng-select [items]="cities"
           bindLabel="name"
           bindValue="id"
           [multiple]="true"
           [maxSelectedItems]="3"
           [closeOnSelect]="false"
           groupBy="selectedAllGroup"
           [selectableGroup]="true"
           placeholder="Select cities"
           (change)="onMaterialGroupChange($event)"
           [isOpen]="isDropdownOpen"
           (click)="toggleDropdown()">

    <ng-template 
            ng-optgroup-tmp let-item="item" 
            let-item$="item$" let-index="index">
            <input id="item-{{index}}" type="checkbox"
            [ngModel] = "item$.selected"
            (change)="handleGroupSelect(item$, $event)"/> Select All
    </ng-template>
</ng-select>

<p>
    Selected cities: {{selectedCityIds}}
</p>

组件类添加对应逻辑 #

isDropdownOpen = false;

toggleDropdown() {
  // 无视选择上限，切换下拉框状态
  this.isDropdownOpen = !this.isDropdownOpen;
}

handleGroupSelect(item$: any, event: Event) {
  // 取消全选操作不受数量限制
  if (!event.target['checked']) {
    item$.toggle(true);
  } else {
    // 选择全选时，校验总数量是否超过上限
    const currentSelectedCount = this.selectedCityIds?.length || 0;
    const groupItemCount = item$.children.length;
    if (currentSelectedCount + groupItemCount <= 3) {
      item$.toggle(true);
    }
  }
}

3. 确认取消操作的可用性 #

ng-select默认允许取消已选中的选项，只要下拉框能正常打开，取消操作就不受maxSelectedItems限制，上述两种方案均可保障这一点。

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