diff --git a/angular.json b/angular.json index 5b6c91b..d87c51b 100644 --- a/angular.json +++ b/angular.json @@ -101,5 +101,8 @@ "@schematics/angular:directive": { "prefix": "app" } + }, + "cli": { + "analytics": false } } diff --git a/src/app/mat-select-search/mat-select-search.component.spec.ts b/src/app/mat-select-search/mat-select-search.component.spec.ts index 1c4610d..bacb2aa 100755 --- a/src/app/mat-select-search/mat-select-search.component.spec.ts +++ b/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 = new ReplaySubject(1); public filteredBanksMatOption: ReplaySubject = new ReplaySubject(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(); + }); + }); + }); + + }); + + }); + + }); + + }); }) }); diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts index ba3d7af..f3382d3 100755 --- a/src/app/mat-select-search/mat-select-search.component.ts +++ b/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()); }