Merge pull request #39 from bithost-gmbh/feature/38-compatibility-enh…

…ancement

Feature/38 compatibility enhancement

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)
 

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",

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;
       });
   }
 

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;
       });
   }
 

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';
     }
   }