Merge pull request #102 from bithost-gmbh/bugfix/101-no-entries-found

fix "no entries found" not shown inside when mat-option

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.5.2
+* Bugfix: Show "no entries found" message when placing `<ngx-mat-select-search>` inside a `<mat-option>` element
+  [#101](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/101)
+
+  Thanks to @mstawick for reporting
+
 ## 1.5.1
 * Bugfix: Hide checkbox when placing `<ngx-mat-select-search>` inside a `<mat-option>` element 
           and with `<mat-select  multi="true">` [#98](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/98)

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.5.1",
+  "version": "1.5.2",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

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

@@ -27,7 +27,7 @@
   </button>
 </div>
 
-<div *ngIf="noEntriesFoundLabel && value && _options?.length === 0"
+<div *ngIf="_noEntriesFound()"
      class="mat-select-search-no-entries-found">
   {{noEntriesFoundLabel}}
 </div>

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

@@ -8,6 +8,7 @@
 $mat-menu-side-padding: 16px !default;
 $clear-button-width: 20px;
 $multiple-check-width: 33px;
+$mat-option-height: 3em;
 
 .mat-select-search-hidden {
   visibility: hidden;
@@ -56,6 +57,20 @@ $multiple-check-width: 33px;
   right: 4px;
   top: 5px;
 }
+
+/** override styling when inside a mat-option */
+:host.mat-select-search-inside-mat-option {
+  .mat-select-search-input {
+    padding-top: 0px;
+    padding-bottom: 0px;
+    height: $mat-option-height;
+    line-height: $mat-option-height;
+  }
+  .mat-select-search-clear {
+    top: 3px;
+  }
+}
+
 /deep/ .cdk-overlay-pane-select-search {
   &.cdk-overlay-pane-select-search-with-offset{
     /* correct offsetY so that the selected option is at the position of the select box when opening */
@@ -73,4 +88,7 @@ $multiple-check-width: 33px;
   .mat-option-pseudo-checkbox {
     display: none;
   }
+  &.mat-select-search-no-entries-found {
+    height: 2 * $mat-option-height;
+  }
 }

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

@@ -10,7 +10,7 @@ import {
   ChangeDetectionStrategy, ChangeDetectorRef,
   Component, ElementRef, EventEmitter, forwardRef, Inject, Input, OnDestroy, OnInit, QueryList,
   ViewChild,
-  ContentChild, Optional
+  ContentChild, Optional, HostBinding
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatOption, MatSelect } from '@angular/material';
@@ -141,6 +141,11 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
   /** Reference to custom search input clear icon */
   @ContentChild(MatSelectSearchClearDirective) clearIcon: MatSelectSearchClearDirective;
 
+  @HostBinding('class.mat-select-search-inside-mat-option')
+  get isInsideMatOption(): boolean {
+    return !!this.matOption;
+  }
+
   /** Current search value */
   get value(): string {
     return this._value;
@@ -226,11 +231,23 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
           .subscribe(() => {
             const keyManager = this.matSelect._keyManager;
             if (keyManager && this.matSelect.panelOpen) {
+
               // avoid "expression has been changed" error
               setTimeout(() => {
+                // set first item active and input width
                 keyManager.setFirstItemActive();
                 this.getWidth();
+
+                // set no entries found class on mat option
+                if (this.matOption) {
+                  if (this._noEntriesFound()) {
+                    this.matOption._getHostElement().classList.add('mat-select-search-no-entries-found');
+                  } else {
+                    this.matOption._getHostElement().classList.remove('mat-select-search-no-entries-found');
+                  }
+                }
               }, 1);
+
             }
           });
       });
@@ -455,4 +472,18 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni
     }
   }
 
+  /**
+   * Returns whether the "no entries found" message should be displayed
+   */
+  public _noEntriesFound(): boolean {
+    if (!this._options) {
+      return;
+    }
+    if (this.matOption) {
+      return this.noEntriesFoundLabel && this.value && this._options.length === 1;
+    } else {
+      return this.noEntriesFoundLabel && this.value && this._options.length === 0;
+    }
+  }
+
 }