#146: Fix error Cannot read property 'attach' of undefined, prepare…

… release 1.7.5 (#150)

* #146: Fix error `Cannot read property 'attach' of undefined` when `<ngx-mat-select-search>` is not inside a `<mat-option>` element with Angular 8

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.7.5
+* Bugfix: Avoid `Cannot read property 'attach' of undefined` when `<ngx-mat-select-search>` 
+  is not inside a `<mat-option>` element with Angular 8
+  [#146](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/1476)
+
 ## 1.7.4
 * Enhancement: Allow setting the initial value of the search input 
   [#147](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/147)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-mat-select-search",
   "description": "Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

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

@@ -287,7 +287,10 @@ describe('MatSelectSearchComponent', () => {
     it('should show a search field and focus it when opening the select', (done) => {
 
       component.filteredBanks
-        .pipe(take(1))
+        .pipe(
+          take(1),
+          delay(1)
+        )
         .subscribe(() => {
           // when the filtered banks are initialized
           fixture.detectChanges();
@@ -324,7 +327,10 @@ describe('MatSelectSearchComponent', () => {
     it('should filter the options available and hightlight the first option in the list, filter the options by input "c" and reset the list', (done) => {
 
       component.filteredBanks
-        .pipe(take(1))
+        .pipe(
+          take(1),
+          delay(1)
+        )
         .subscribe(() => {
           // when the filtered banks are initialized
           fixture.detectChanges();
@@ -392,7 +398,10 @@ describe('MatSelectSearchComponent', () => {
       it('should show a search field and focus it when opening the select', (done) => {
 
         component.filteredBanksMatOption
-          .pipe(take(1))
+          .pipe(
+            take(1),
+            delay(1)
+          )
           .subscribe(() => {
             // when the filtered banks are initialized
             fixture.detectChanges();
@@ -429,7 +438,10 @@ describe('MatSelectSearchComponent', () => {
       it('should filter the options available and hightlight the first option in the list, filter the options by input "c" and reset the list', (done) => {
 
         component.filteredBanksMatOption
-          .pipe(take(1))
+          .pipe(
+            take(1),
+            delay(1)
+          )
           .subscribe(() => {
             // when the filtered banks are initialized
             fixture.detectChanges();
@@ -499,7 +511,10 @@ describe('MatSelectSearchComponent', () => {
       fixture.detectChanges();
 
       component.filteredBanks
-        .pipe(take(1))
+        .pipe(
+          take(1),
+          delay(1)
+        )
         .subscribe(() => {
 
           // when the filtered banks are initialized
@@ -537,7 +552,10 @@ describe('MatSelectSearchComponent', () => {
       fixture.detectChanges();
 
       component.filteredBanksMulti
-        .pipe(take(1))
+        .pipe(
+          take(1),
+          delay(1)
+        )
         .subscribe(() => {
           // when the filtered banks are initialized
           fixture.detectChanges();

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

@@ -135,7 +135,7 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
 
   /** Label of the search placeholder */
   @Input() placeholderLabel = 'Suche';
-  
+
   /** Type of the search input field */
   @Input() type = "text";
 
@@ -324,7 +324,9 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   }
 
   ngAfterViewInit() {
-    this.setOverlayClass();
+    setTimeout(() => {
+      this.setOverlayClass();
+    });
 
     // update view when available options change
     this.matSelect.openedChange

src/app/mat-select-search/ngx-mat-select-search.module.ts

@@ -11,7 +11,7 @@ import {MatButtonModule, MatInputModule, MatIconModule, MatProgressSpinnerModule
 import { CommonModule } from '@angular/common';
 import { MatSelectSearchClearDirective } from './mat-select-search-clear.directive';
 
-export const MatSelectSearchVersion = '1.7.4';
+export const MatSelectSearchVersion = '1.7.5';
 
 
 @NgModule({