ion-select (multiple) not working with array of objects using compareWith property

Question

I am facing issue with ion-select(array objects) (multiple select). Two items are already selected on page load, but when you open the drop-down, none of the items are checked. Here is stackblitz link to reproduce this issue.

https://stackblitz.com/edit/ionic-angular-v5-kie1wd

I am using Ionic(5.26.0) and angular(8.2.14) for my project.

<ion-item>
  <ion-label>Users(Multi)</ion-label>
  <ion-select multiple="true" [(ngModel)]="selectedMultipleEmployee" [compareWith]="compareFn"
    (ionChange)="multiChange()">
    <ion-select-option *ngFor="let user of users" [value]="user">{{user.first + ' ' + user.last}}
    </ion-select-option>
  </ion-select>
</ion-item>

compareFn(e1: User, e2: User): boolean {
    return e1 && e2 ? e1.id === e2.id : e1 === e2;
}

did you try [value]="user.id" because user is boject not property. — Hassan Ali, Aug 06 '20 at 09:37
yes, It works that way if we bind single id to value but I want to bind object instead of a single id — Shahin Belim, Aug 06 '20 at 09:58
In the value field, we just pass the single value not object. like a number, boolean, etc only. — Hassan Ali, Aug 06 '20 at 10:12
As per this documentation https://ionicframework.com/docs/api/select#object-value-references , it should work. — Shahin Belim, Aug 06 '20 at 10:15
I've faced the same issue while upgrading from ionic3 to ionic5. The same code used to work with ionic3, but now there seems to be a bug (?). — Eric Gopak, Oct 14 '20 at 23:17

Eric Gopak · Accepted Answer · 2020-10-20T18:10:27.293

TL;DR

Your compareWith(e1, e2) function must return true if e2 is an array and a single element e1 is in e2, for example:

// defined outside of class
const compareWith = (e1, e2) => {
    // e2 may be an array, if multiple="true"
    if (Array.isArray(e2) ) {
        return e2.indexOf(e1) !== -1;
    }
    // fallback to single element comparison
    return e1 && e2 ? e1.id === e2.id : e1 === e2;
}

class MyPage {
...
    compareFn = compareWith;
...
}

Important: also, define your function compareWith outside of the class, otherwise it does not work

Background

I've had the same issue after upgrading from Ionic3 to Ionic5, and I've debugged the ion-select code to see what's causing this issue.

Here's the function that determines if the an option must be checked or unchecked:

const compareOptions = (currentValue, compareValue, compareWith) => {
    if (typeof compareWith === 'function') {
        return compareWith(currentValue, compareValue);
    }
    else if (typeof compareWith === 'string') {
        return currentValue[compareWith] === compareValue[compareWith];
    }
    else {
        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
    }
};

The compareValue is an array and the final else clause handles that case if compareWith is not provided. But since you provide your own compareWith function, then it has to be able to check if a single items belongs to that array.

Here's the actual code that worked for my specific case (comparing items by field code):

const compareWith = (f1, f2) => {
  if (Array.isArray(f2)) {
    if (!f1 || !f1.code) {
      return false;
    }
    return f2.find(val => val && val.code === f1.code);
  }
  return f1 && f2 ? f1.code === f2.code : f1 === f2;
};

Update: Added a note that compareWith needs to be defined outside of the class.

Thank you for the detailed response but your solution is not working for me. You can check that implementation here. https://stackblitz.com/edit/ionic-angular-v5-kie1wd — Shahin Belim, Oct 16 '20 at 11:58
Please check this: https://stackblitz.com/edit/ionic-angular-v5-i8heaq I've moved `compareWith` function outside the `class` definition, and I've replaced `.code` with `.id` where appropriate :) — Eric Gopak, Oct 20 '20 at 18:03

ion-select (multiple) not working with array of objects using compareWith property

1 Answers1

TL;DR

Background