diff --git a/CHANGELOG.md b/CHANGELOG.md index e95b883..e3d3f1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.2.4 +* Enhancement: ensure forward compatibility independent of markup changes [#38](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/38) +* Enhancement: fix warnings in tests, improve example + ## 1.2.3 * Bugfix: input shows rounded corners when used together with MatDatepicker [#33](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/33) diff --git a/package-lock.json b/package-lock.json index 9e40433..530b698 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-mat-select-search", - "version": "1.2.3", + "version": "1.2.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 30cb3e0..26c6ee5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ngx-mat-select-search", "description": "Library that provides an angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.", - "version": "1.2.3", + "version": "1.2.4", "license": "MIT", "scripts": { "ng": "ng", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b5e2ab6..49e2f6d 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -111,8 +111,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy { // the form control (i.e. _initializeSelection()) // this needs to be done after the filteredBanks are loaded initially // and after the mat-option elements are available - this.singleSelect.compareWith = (a: Bank, b: Bank) => a.id === b.id; - this.multiSelect.compareWith = (a: Bank, b: Bank) => a.id === b.id; + this.singleSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id; + this.multiSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id; }); } 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 d669763..9195fb3 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 @@ -149,8 +149,8 @@ export class MatSelectSearchTestComponent implements OnInit, OnDestroy, AfterVie // the form control (i.e. _initializeSelection()) // this needs to be done after the filteredBanks are loaded initially // and after the mat-option elements are available - this.matSelect.compareWith = (a: Bank, b: Bank) => a.id === b.id; - this.matSelectMulti.compareWith = (a: Bank, b: Bank) => a.id === b.id; + this.matSelect.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id; + this.matSelectMulti.compareWith = (a: Bank, b: Bank) => a && b && a.id === b.id; }); } 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 5e12b87..1f34795 100755 --- a/src/app/mat-select-search/mat-select-search.component.ts +++ b/src/app/mat-select-search/mat-select-search.component.ts @@ -329,8 +329,17 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni .pipe(takeUntil(this._onDestroy)) .subscribe(() => { // note: this is hacky, but currently there is no better way to do this - this.searchSelectInput.nativeElement.parentElement.parentElement - .parentElement.parentElement.parentElement.classList.add(overlayClass); + let element: HTMLElement = this.searchSelectInput.nativeElement; + let overlayElement: HTMLElement; + while (element = element.parentElement) { + if (element.classList.contains('cdk-overlay-pane')) { + overlayElement = element; + break; + } + } + if (overlayElement) { + overlayElement.classList.add(overlayClass); + } }); this.overlayClassSet = true; @@ -380,14 +389,19 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni * And support all Operation Systems */ private getWidth() { - const element = this.innerSelectSearch.nativeElement; - // Need to check that the parentElement is referenced - // because angulars change detection will run this earlier - if (element.parentElement.parentElement) { - const container = element.parentElement.parentElement.parentElement; - const scrollbarWidth = container.offsetWidth - container.clientWidth; - - element.style.width = container.clientWidth + 'px'; + if (!this.innerSelectSearch || !this.innerSelectSearch.nativeElement) { + return; + } + let element: HTMLElement = this.innerSelectSearch.nativeElement; + let panelElement: HTMLElement; + while (element = element.parentElement) { + if (element.classList.contains('mat-select-panel')) { + panelElement = element; + break; + } + } + if (panelElement) { + this.innerSelectSearch.nativeElement.style.width = panelElement.clientWidth + 'px'; } }