Fix search filter when not found case at select all button

src/ng-multiselect-dropdown/src/multi-select.component.html

@@ -18,7 +18,7 @@
   <div class="dropdown-list" [hidden]="!_settings.defaultOpen">
     <ul class="item1">
       <li (click)="toggleSelectAll()" *ngIf="(_data.length > 0 || _settings.allowRemoteDataSearch) && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1" class="multiselect-item-checkbox" style="border-bottom: 1px solid #ccc;padding:10px">
-        <input type="checkbox" aria-label="multiselect-select-all" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached()" />
+        <input type="checkbox" aria-label="multiselect-select-all" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached() || isFilterResultEmpty()" />
         <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>
       </li>
       <li class="filter-textbox" *ngIf="(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter">

src/ng-multiselect-dropdown/src/multiselect.component.ts

@@ -213,6 +213,11 @@ export class MultiSelectComponent implements ControlValueAccessor {
     return this._settings.limitSelection === this.selectedItems.length;
   }
 
+  isFilterResultEmpty(): boolean {
+    const filteredItems = this.listFilterPipe.transform(this._data, this.filter);
+    return filteredItems.length === 0;
+  }
+
   isAllItemsSelected(): boolean {
     // get disabld item count
     let filteredItems = this.listFilterPipe.transform(this._data,this.filter);
@@ -221,6 +226,11 @@ export class MultiSelectComponent implements ControlValueAccessor {
     if ((!this.data || this.data.length === 0) && this._settings.allowRemoteDataSearch) {
       return false;
     }
+
+    if (this.selectedItems.length === 0 && filteredItems.length === 0) {
+      return false;
+    }
+
     return filteredItems.length === this.selectedItems.length + itemDisabledCount;
   }
 
@@ -314,7 +324,7 @@ export class MultiSelectComponent implements ControlValueAccessor {
   }
 
   toggleSelectAll() {
-    if (this.disabled) {
+    if (this.disabled || this.isFilterResultEmpty()) {
       return false;
     }
     if (!this.isAllItemsSelected()) {

src/ng-multiselect-dropdown/test/multi-select-not-found-search.component.spec.ts

@@ -0,0 +1,70 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MultiSelectComponent } from '../src';
+import { createTestingModule, tickAndDetectChanges } from './helper';
+
+@Component({
+    template: ``
+})
+class Ng2MultiSelectDropdownNotFoundSearchComponent {
+    @ViewChild(MultiSelectComponent, { static: false })
+    select: MultiSelectComponent;
+    cities = [
+        { item_id: 1, item_text: 'Mumbai' },
+        { item_id: 2, item_text: 'Bangalore' },
+        { item_id: 3, item_text: 'Pune', isDisabled: true },
+        { item_id: 4, item_text: 'Navsari' },
+        { item_id: 5, item_text: 'New Delhi' }
+    ];
+    selectedItem = [{ item_id: 1, item_text: 'Mumbai' }, { item_id: 4, item_text: 'Navsari' }];
+    dropdownSettings = {
+        singleSelection: false,
+        idField: 'item_id',
+        textField: 'item_text',
+        selectAllText: 'Select All',
+        unSelectAllText: 'UnSelect All',
+        badgeShowLimit: 3,
+        disabled: false,
+        allowSearchFilter: true,
+        closeDropDownOnSelection: true
+    };
+}
+
+describe('ng-multiselect-component: not found search', () => {
+    let fixture: ComponentFixture<Ng2MultiSelectDropdownNotFoundSearchComponent>;
+    beforeEach(fakeAsync(() => {
+      fixture = createTestingModule(
+        Ng2MultiSelectDropdownNotFoundSearchComponent,
+        `<div class='container'>
+            <ng-multiselect-dropdown name="city" [data]="cities"
+                [(ngModel)]="selectedItem" [settings]="dropdownSettings"
+                (onSelect)="onItemSelect($event)"
+                [disabled]="disabled">
+            </ng-multiselect-dropdown>
+        </div>`
+      );
+    }));
+
+    it('should disabled "Select All" button when search result not found', fakeAsync(() => {
+        const searchInputEl = fixture.debugElement.query(By.css('.filter-textbox input[type="text"]')).nativeElement;
+        searchInputEl.value = 'asdfasdk';
+        searchInputEl.dispatchEvent(new Event('input'));
+        const selectAllCheckboxEl = fixture.debugElement.queryAll(By.css('.multiselect-item-checkbox input[type="checkbox"]'))[0]
+                                    .nativeElement;
+        tickAndDetectChanges(fixture);
+        expect(fixture.componentInstance.select.filter.text).toContain('asdfasdk');
+        expect(fixture.componentInstance.select.isAllItemsSelected()).toBe(false);
+        expect(selectAllCheckboxEl.disabled).toBe(true);
+    }));
+
+    it('should be contain "Select All" as wording "Select All" button when search result not found', fakeAsync(() => {
+        const searchInputEl = fixture.debugElement.query(By.css('.filter-textbox input[type="text"]')).nativeElement;
+        searchInputEl.value = 'asdfasdk';
+        searchInputEl.dispatchEvent(new Event('input'));
+        const selectAllWording = fixture.debugElement.queryAll(By.css('.multiselect-item-checkbox div'))[0]
+                                    .nativeElement;
+        tickAndDetectChanges(fixture);
+        expect(selectAllWording.textContent).toContain('Select All');
+    }));
+});