ng-select Dropdown not opening after limit reach

Question

In multi select dropdown when limit is reached. It doesn't open. It is not correct for every use case. I want to show selected items. SO, he can uncheck them in manually from the dropdown. I am not showing all items selected, just the count of total selected items. So can't remove selected item easily. That's why I want to open the dropdown.

If limit is reached. Dropdown won't open and I can't remove a specific selection. I want to remove specific items from the list manually.

   <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)">

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


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

    <div style="margin-top:300px"></div>

this.cities = [
  { id: 1, name: 'Amar' },
  { id: 2, name: 'Akbhar' },
  { id: 3, name: 'Anthony' },
  { id: 4, name: 'BadkaG' },
  { id: 5, name: 'Baave' },
]

Answer 1

Update the package version from @ng-select/ng-select 2.16.0 to 10.0.1. I've used angular 15 and added your forgotten line [maxSelectedItems]="3" and now it opens.