Ion Select doesn't work as expected

Ionic Framework
1

Hello guys, I’m facing an issue with ion-select.

I am using an ion-select in my Ionic Angular app to allow users to select multiple options from a list of items. I have set a maximum limit on the number of ingredients that can be selected at once. When the user tries to select more than the maximum limit, I want the list of check-box buttons to be updated accordingly. It is only getting update when the popover is closed.

I have tried using ChangeDetectorRef to force an update to the ion-select and ion-select-option components, but it doesn’t seem to work. I have also tried using NgZone to run the code in a separate zone, but that also didn’t work.

I suspect that the issue may be related to the fact that ion-select-options are rendered within a Shadow DOM, and thus are not affected by Angular’s change detection. I’m not sure how to approach this problem and would appreciate any advice or suggestions. Thank you.

Here is the HTML of my component:

<ion-select
  [(ngModel)]="selectedItems"
  (ionChange)="onSelect()"
  [multiple]="maxQuantity > 1"
  interface="popover"
  label="Select your items:"
  label-placement="floating"
>
  <ion-select-option *ngFor="let item of items" [value]="item">
    {{ item }}
  </ion-select-option>
</ion-select>

And here is the TS of my component:

export class SelectListComponent implements OnChanges {
  @Input() items: Item[];
  @Input() maxQuantity: number;
  @Output() selected = new EventEmitter<Item[]>();

  selectedItems: Item | Item[] = [];

  ngOnChanges() {
    // Reset selected items when maxQuantity changes
    this.selectedItems = [];
  }

  onSelect() {
    if (!Array.isArray(this.selectedItems)) {
      this.selectedItems = [this.selectedItems];
    } else {
      this.selectedItems = this.limitSelection(this.selectedItems);
    }

    this.selected.emit(this.selectedItems);
  }

  private limitSelection(selectedItems: Item[]): Item[] {
    if (selectedItems.length > this.maxQuantity) {
      const toRemove = selectedItems.slice(0, selectedItems.length - this.maxQuantity);
      selectedItems = selectedItems.filter(
        (item) => !toRemove.includes(item)
      );
    }

    return selectedItems;
  }
}