How to apply filter when ion-select-option is pressed

Question

Hello in my Ionic 5 Angular 14 project i want to use ion-select to filter the array of objects. Ionic uses OK and Cancel buttons to apply the filter but i don't want that. I want when the user clicks on one of the <ion-select-option values the filter to be applied without having to press on the OK button provided but Ionic. And the dialog box to close when the value is pressed. Here is my code. IT WORKS FINE WHEN I PRESS THE OK BUTTON BUT WHEN THE ION-SELECT-OPTION IS PRESSED I AM NOT GETTING ANYTHING ON CONSOLE.

html

                <ion-select placeholder="Choose one..." [(ngModel)]="filters.media" (ionChange)="applyUsersFilter()">
                    <ion-select-option value="all">All Users</ion-select-option>
                    <ion-select-option  value="most">Most Media</ion-select-option>
                    <ion-select-option value="less">Less Media</ion-select-option>
                </ion-select>   

ts. function

allArtistsSet() {
    this.userData.allArtists(this.offset).pipe(
        map((data: any) => {
            if (data.success) {
                const temp = data.artistsFeed;
                for (let i = 0; i < temp.length; i++) {
                    for (let j = 0; j < this.editors.length; j++) {
                        if (temp[i].uid == this.editors[j].uid) {
                            temp[i].selected = true;
                        }
                    }
                }

                this.allArtists = temp;
                this.filtered = temp;
                this.updateCreativenessArtists();
            }
        })
    ).subscribe()
    console.log(this.allArtists);
}

applyUsersFilter() {
    console.log('applyUsersFilter() called'); // Log to check if the function is called

    console.log('filters', this.filters);
    console.log('artists', this.allArtists);

    let result = [...this.allArtists]; // Create a shallow copy to avoid mutating the original array

    if (this.filters.media) {
        if (this.filters.media == 'most') {
            result.sort((a, b) => b.updates_count - a.updates_count); // Sort descending
        } else if (this.filters.media == 'less') {
            result.sort((a, b) => a.updates_count - b.updates_count); // Sort ascending
        }
        this.filtered = result;
    }
    console.log('filtered', this.filtered); // Log the filtered array
}

Answer 1

The default interface for ion-select is "alert" and hence you see those buttons.

You may want to use interface for "popover", works kind of what you described.

    <ion-select aria-label="Fruit" interface="popover" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
    </ion-select>

In this case the change detection will work on every selection.

Another great option is "action-sheet".

<ion-select
  label="Action Sheet"
  [interfaceOptions]="customActionSheetOptions"
  interface="action-sheet"
  placeholder="Select One"
>

Here's the docs for all 3 options - play with them. https://ionicframework.com/docs/api/select#interface-options

If you don't like any of these options - you may want to build a custom one with plain HTML's select tag and angular change detection. Shouldn't be that difficult.