Ionic v4: Re-add compareWith property to ion-select

[FdezRomero]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.8
   @angular-devkit/schematics : 0.6.8
   @angular/cli               : 6.0.8
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.1
   npm    : 6.1.0
   OS     : macOS High Sierra

Describe the Bug
ion-select is missing the compareWith Angular property in ionic-angular v4, previously working in v3 with PR #11965.

Steps to Reproduce
Steps to reproduce the behavior:

1. Add an <ion-select> element with [compareWith]="compareFunction".
2. The following error is thrown in the console:

Can't bind to 'compareWith' since it isn't a known property of 'ion-select'.
1. If 'ion-select' is an Angular component and it has 'compareWith' input, then verify that it is part of this module.
2. If 'ion-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Related Code
If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior
To be able to bind to compareWith in an ion-select.

Additional Context
Angular docs for compareWith

[IzioDev]

Just go over this file : https://github.com/ionic-team/ionic/blob/master/core/src/components/select/select.tsx

and set:

  @Prop()
compareWith(fn: (o1: any, o2: any) => boolean) {
  if (typeof fn !== 'function') {
    throw new Error(`compareWith must be a function, but received ${JSON.stringify(fn)}`);
  }
  this._compareWith = fn;
}

Then build again the core with the npm run build.dev.core command and you're done! 👍

[FdezRomero]

@izio38 I wish it were that easy! 😅

For starters, this._compareWith is not defined (not a big deal). But the part I have doubts about is where the compare function should be used as the functionality has now been split between valueChanged() and optLoad().

I'm not sure how the option elements and the select play together, as they now emit a ionSelectOptionDidLoad custom event.

That's why I decided to open this issue instead of a PR.

Thanks,
Rodrigo

[matheusdavidson]

same problem, need compareWith to work with objects!

[bkarv]

Has there been any more work on this? I too need compareWith to work with objects. @FdezRomero are you saying izio38 solution won't work? If not did you find a work around, do you mind sharing it?

[FdezRomero]

@bkarv No, that code wouldn't work with the current codebase. You can try it yourself by cloning the repo and modifying the source. You'll see all the TypeScript errors about missing properties.

I talked about this some time ago with @manucorporat and there wasn't a straightforward solution. I ended up using form components from Angular Material instead, since they are better suited for my use case (a desktop PWA).

[bkarv]

Thanks for the prompt response. I looked at Angular Material, did you mean you gave up on Ionic all together or just imported Angular Material's form components/library into your Ionic app?

It is disappointing this has not been implemented as I would say many would need object support in ion-select

[FdezRomero]

@bkarv Not disappointing at all. That's what betas are made for! Finding things that are missing or not working as expected and reporting them 😄

I didn't drop Ionic, just replaced inputs and selects for the ones in Angular Material, since the drop-down select style suited by app better anyway.

[bkarv]

@FdezRomero sorry misunderstood! Ok well fingers crossed a solution is found.

[bkarv]

@FdezRomero @izio38 @matheusdavidson

I needed compareWith because had an array of objects as my select options eg
{id: string, name: string}[]

After digging around I found this post where we can use trackBy instead

#6627

Tried it in Ionic 4 -beta 8 and it works like a charm! If anything trackBy feature is better than compareWith as I don't have to define the function. Here is a working example below:

Controller

  name: {id: string, name: string} = null; // question 1
  list: {id: string, name: string}[] = [{id: '1', name: 'John'}, {id: '2', name:'Peter'}, {id: '3', name: 'David'}];

Html

<ion-select  trackBy="id"  placeholder="Choose Name" [(ngModel)]="name" >
          <ion-select-option *ngFor="let item of list"   [value]="item">{{item.name}} 
          </ion-select-option>
</ion-select>

[kirliam]

Same problem! And the trackBy suggested by @bkarv is not working on beta15.

[zakton5]

+1 This is definitely needed again.

[patryk-fuhrman]

Any updates in this matter? trackBy is not working on rc3 too.

[jkeczan]

+1 on this. I needed this consistently as I am working on an application with about 30 selects

[zakton5]

I'm hoping to create a PR for this fairly soon. Stay tuned!

[zakton5]

Put in a PR for this finally.

[remisture]

When will this be merged?

[liamdebeasi]

Hi everyone,

This has been fixed by #17358 and will be in the next release of Ionic. Thanks for your patience!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.