fix compare firstOptionIsChanged - use MatOption value (#446)

* fix compare firstOptionIsChanged - use MatOption value

* Update src/app/mat-select-search/mat-select-search.component.ts

Co-authored-by: Esteban Gehring <esteban.gehring@gmail.com>

* remove unnecessary cast

* fix line length for linter

---------

Co-authored-by: Esteban Gehring <esteban.gehring@gmail.com>

angular.json

@@ -101,5 +101,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/mat-select-search/mat-select-search.component.spec.ts

@@ -28,6 +28,7 @@ import { MAT_SELECTSEARCH_DEFAULT_OPTIONS, MatSelectSearchOptions } from './defa
 interface Bank {
   id: string;
   name: string;
+  bic: { value: string };
 }
 
 @Component({
@@ -111,10 +112,12 @@ export class MatSelectSearchTestComponent implements OnInit, OnDestroy, AfterVie
 
 
   // list of banks
-  public banks: Bank[] = [{name: 'Bank A', id: 'A'}, {name: 'Bank B', id: 'B'}, {
-    name: 'Bank C',
-    id: 'C'
-  }, {name: 'Bank DC', id: 'DC'}];
+  public banks: Bank[] = [
+    { name: 'Bank A', id: 'A', bic: { value: '102' } },
+    { name: 'Bank B', id: 'B', bic: { value: '203' } },
+    { name: 'Bank C', id: 'C', bic: { value: '304' } },
+    { name: 'Bank DC', id: 'DC', bic: { value: '405' } }
+  ];
 
   public filteredBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
   public filteredBanksMatOption: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
@@ -550,6 +553,73 @@ describe('MatSelectSearchComponent', () => {
 
       });
 
+      it('should compare first option changed by value of "bic"', (done) => {
+        component.matSelectMatOption.compareWith = (b1: Bank, b2: Bank) => b1.bic.value === b2.bic.value;
+
+        component.filteredBanksMatOption
+          .pipe(
+            take(1),
+            delay(1)
+          )
+          .subscribe(() => {
+            // when the filtered banks are initialized
+            fixture.detectChanges();
+
+            component.matSelectMatOption.open();
+            fixture.detectChanges();
+
+            component.matSelectMatOption.openedChange
+              .pipe(take(1))
+              .subscribe((opened) => {
+                expect(opened).toBe(true);
+                const searchField = document.querySelector('.mat-select-search-inner .mat-select-search-input');
+                expect(searchField).toBeTruthy();
+
+                expect(component.matSelectMatOption.options.length).toBe(5);
+
+                // search for "c"
+                component.matSelectSearchMatOption._formControl.setValue('c');
+                fixture.detectChanges();
+
+                expect(component.bankFilterCtrlMatOption.value).toBe('c');
+                expect(component.matSelectMatOption.panelOpen).toBe(true);
+
+                component.filteredBanks
+                  .pipe(take(1))
+                  .subscribe(() => {
+                    fixture.detectChanges();
+
+                    setTimeout(() => {
+                      expect(component.matSelectMatOption.options.length).toBe(3);
+                      expect(component.matSelectMatOption.options.toArray()[1].value.id).toBe('C');
+                      expect(component.matSelectMatOption.options.toArray()[1].active).toBe(true, 'first active');
+
+                      // search for DC
+                      component.matSelectSearchMatOption._formControl.setValue('DC');
+                      fixture.detectChanges();
+
+                      component.filteredBanks
+                        .pipe(take(1))
+                        .subscribe(() => {
+                          fixture.detectChanges();
+
+                          setTimeout(() => {
+                            expect(component.matSelectMatOption.options.length).toBe(2);
+                            expect(component.matSelectMatOption.options.toArray()[1].value.id).toBe('DC');
+                            expect(component.matSelectMatOption.options.toArray()[1].active).toBe(true, 'first active');
+
+                            done();
+                          });
+                        });
+                    });
+
+                  });
+
+              });
+
+          });
+
+      });
     })
 
   });

src/app/mat-select-search/mat-select-search.component.ts

@@ -343,18 +343,19 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, ControlValue
               const currentFirstOption = options[this.getOptionsLengthOffset()];
 
               const keyManager = this.matSelect._keyManager;
-              if (keyManager && this.matSelect.panelOpen) {
+              if (keyManager && this.matSelect.panelOpen && currentFirstOption) {
 
                 // set first item active and input width
 
                 // Check to see if the first option in these changes is different from the previous.
-                const firstOptionIsChanged = !this.matSelect.compareWith(previousFirstOption, currentFirstOption);
+                const firstOptionIsChanged = !previousFirstOption
+                  || !this.matSelect.compareWith(previousFirstOption.value, currentFirstOption.value);
 
                 // CASE: The first option is different now.
                 // Indiciates we should set it as active and scroll to the top.
                 if (firstOptionIsChanged
                   || !keyManager.activeItem
-                  || !options.find(option => this.matSelect.compareWith(option, keyManager.activeItem))) {
+                  || !options.find(option => this.matSelect.compareWith(option.value, keyManager.activeItem.value))) {
                   keyManager.setActiveItem(this.getOptionsLengthOffset());
                 }