fix: allow to use compareWith fn when bindValue is used (#586)

closes #535
ng-select · May 30, 2018 · 7a3dfb3 · 7a3dfb3
1 parent ac2798d
commit 7a3dfb3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -123,7 +123,7 @@ map: {
 | [closeOnSelect] | `boolean` |  true | no | Whether to close the menu when a value is selected |
 | clearAllText | `string` | `Clear all` | no | Set custom text for clear all icon title |
 | [clearable] | `boolean` | `true` | no | Allow to clear selected value. Default `true`|
-| [compareWith] | `(a: any, b: any) => boolean` | `(a, b) => a === b` | no | A function to compare the option values with the selected values |
+| [compareWith] | `(a: any, b: any) => boolean` | `(a, b) => a === b` | no | A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned. |
 | dropdownPosition | `bottom` \| `top` \| `auto` |  `auto` | no | Set the dropdown position on open |
 | [groupBy] | `string` \| `Function` | null | no | Allow to group items by key or function expression |
 | [selectableGroup] | `boolean` | false | no | Allow to select group when groupBy is used |

diff --git a/src/ng-select/items-list.ts b/src/ng-select/items-list.ts
@@ -76,15 +76,16 @@ export class ItemsList {
     }
 
     findItem(value: any): NgOption {
-        if (this._ngSelect.bindValue) {
-            return this._items.find(item => !item.hasChildren && this.resolveNested(item.value, this._ngSelect.bindValue) === value);
+        let findBy: (item: NgOption) => boolean;
+        if (this._ngSelect.compareWith) {
+            findBy = item => this._ngSelect.compareWith(item.value, value) 
+        } else if (this._ngSelect.bindValue) {
+            findBy = item => !item.hasChildren && this.resolveNested(item.value, this._ngSelect.bindValue) === value
+        } else {
+            findBy = item => item.value === value ||
+                    !item.hasChildren && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel)
         }
-        const option = this._items.find(x => x.value === value);
-        const findBy = this._ngSelect.compareWith ?
-            (item: NgOption) => this._ngSelect.compareWith(item.value, value) :
-            (item: NgOption) => !item.hasChildren && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel);
-
-        return option || this._items.find(item => findBy(item));
+        return this._items.find(item => findBy(item));
     }
 
     unselect(item: NgOption) {

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -709,7 +709,7 @@ describe('NgSelectComponent', function () {
                     expect(fixture.componentInstance.select.selectedItems).toEqual(result);
                 }));
 
-                it('should select by compareWith function', fakeAsync(() => {
+                it('should select by compareWith function when bindValue is not used', fakeAsync(() => {
                     const fixture = createTestingModule(
                         NgSelectTestCmp,
                         `<ng-select [items]="cities"
@@ -729,6 +729,27 @@ describe('NgSelectComponent', function () {
                     expect(fixture.componentInstance.select.selectedItems[0].value).toEqual(city);
                 }));
 
+                it('should select by compareWith function when bindValue is used', fakeAsync(() => {
+                    const fixture = createTestingModule(
+                        NgSelectTestCmp,
+                        `<ng-select [items]="cities"
+                            bindLabel="name"
+                            bindValue="id"
+                            placeholder="select value"
+                            [compareWith]="compareWith"
+                            [(ngModel)]="selectedCityId">
+                        </ng-select>`);
+
+                    const cmp = fixture.componentInstance;
+                    const cityId = cmp.cities[1].id.toString();
+                    cmp.selectedCityId = cityId;
+
+                    cmp.compareWith = (city, model: string) => city.id === +model;
+
+                    tickAndDetectChanges(fixture);
+                    expect(cmp.select.selectedItems[0].value).toEqual(cmp.cities[1]);
+                }));
+
                 it('should select selected when there is no items', fakeAsync(() => {
                     const fixture = createTestingModule(
                         NgSelectTestCmp,