Merge pull request #60 from UiPath/fix/ui_suggest_toggle_disable

fix(suggest): toggle disable state on searchable

Author: toxik

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v0.10.12 (2019-10-24)
+* **suggest** fix `loading` state on toggle disabled
+
 # v0.10.11 (2019-10-24)
 * **testing** define `keyCode` and bind correct `code` in generator
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

package.json

@@ -1,49 +1,49 @@
 import {
-  Component,
-  ViewChild,
+    Component,
+    ViewChild,
 } from '@angular/core';
 import {
-  async,
-  ComponentFixture,
-  discardPeriodicTasks,
-  fakeAsync,
-  TestBed,
-  tick,
+    async,
+    ComponentFixture,
+    discardPeriodicTasks,
+    fakeAsync,
+    TestBed,
+    tick,
 } from '@angular/core/testing';
 import {
-  FormBuilder,
-  FormGroup,
-  ReactiveFormsModule,
+    FormBuilder,
+    FormGroup,
+    ReactiveFormsModule,
 } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  EventGenerator,
-  Key,
+    EventGenerator,
+    Key,
 } from '@uipath/angular/testing';
 
 import * as faker from 'faker';
 import { VirtualScrollItemStatus } from 'projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api';
 import {
-  Observable,
-  of,
+    Observable,
+    of,
 } from 'rxjs';
 import {
-  delay,
-  finalize,
-  map,
-  skip,
-  take,
+    delay,
+    finalize,
+    map,
+    skip,
+    take,
 } from 'rxjs/operators';
 
 import {
-  ISuggestValue,
-  ISuggestValues,
+    ISuggestValue,
+    ISuggestValues,
 } from './models';
 import {
-  generateSuggestionItem,
-  generateSuggetionItemList,
+    generateSuggestionItem,
+    generateSuggetionItemList,
 } from './test';
 import { UiSuggestComponent } from './ui-suggest.component';
 import { UiSuggestModule } from './ui-suggest.module';
@@ -527,6 +527,57 @@ const sharedSpecifications = (
             });
         });
 
+        describe('Scenario: toggle disabled state', () => {
+            it('should toggle loading state if it is searchable with items', async () => {
+                const items = generateSuggetionItemList();
+                component.items = items;
+                component.disabled = true;
+                component.searchable = true;
+
+                fixture.detectChanges();
+
+                expect(uiSuggest.disabled).toBeTruthy();
+                expect(uiSuggest.loading$.value).toBeTruthy();
+
+                component.disabled = false;
+                fixture.detectChanges();
+
+                expect(uiSuggest.disabled).toBeFalsy();
+
+                const display = fixture.debugElement.query(By.css('.display'));
+                display.nativeElement.dispatchEvent(EventGenerator.click);
+
+                expect(uiSuggest.loading$.value).toBeFalsy();
+            });
+
+            it('should not be in loading state if it has a searchSourceFactory', async () => {
+                const items = generateSuggetionItemList();
+                component.disabled = true;
+                uiSuggest.searchSourceFactory = (term) => {
+                    return of([...items]).pipe(
+                        map(itemList => ({
+                            data: itemList.filter(item => item.text.includes(term as string)),
+                            total: itemList.length,
+                        }) as ISuggestValues<any>),
+                    );
+                };
+
+                fixture.detectChanges();
+                expect(uiSuggest.disabled).toBeTruthy();
+
+                component.disabled = false;
+                fixture.detectChanges();
+                expect(uiSuggest.disabled).toBeFalsy();
+
+                const display = fixture.debugElement.query(By.css('.display'));
+                display.nativeElement.dispatchEvent(EventGenerator.click);
+                await fixture.whenStable();
+
+                expect(uiSuggest.loading$.value).toBeFalsy();
+            });
+        });
+
+
         it('should not open on first click and close on the second', () => {
             fixture.detectChanges();
 

projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts

@@ -2,29 +2,29 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { ListRange } from '@angular/cdk/collections';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  isDevMode,
-  OnDestroy,
-  OnInit,
-  Optional,
-  Output,
-  Self,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ContentChild,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    Input,
+    isDevMode,
+    OnDestroy,
+    OnInit,
+    Optional,
+    Output,
+    Self,
+    TemplateRef,
+    ViewChild,
+    ViewEncapsulation,
 } from '@angular/core';
 import {
-  FormGroupDirective,
-  NgControl,
-  NgForm,
+    FormGroupDirective,
+    NgControl,
+    NgForm,
 } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -33,44 +33,44 @@ import { VirtualScrollItemStatus } from '@uipath/angular/directives/ui-virtual-s
 import cloneDeep from 'lodash-es/cloneDeep';
 import isEqual from 'lodash-es/isEqual';
 import {
-  BehaviorSubject,
-  combineLatest,
-  merge,
-  Observable,
-  Subject,
-  Subscription,
+    BehaviorSubject,
+    combineLatest,
+    merge,
+    Observable,
+    Subject,
+    Subscription,
 } from 'rxjs';
 import {
-  debounceTime,
-  delay,
-  distinctUntilChanged,
-  filter,
-  finalize,
-  map,
-  retry,
-  startWith,
-  takeUntil,
-  tap,
+    debounceTime,
+    delay,
+    distinctUntilChanged,
+    filter,
+    finalize,
+    map,
+    retry,
+    startWith,
+    takeUntil,
+    tap,
 } from 'rxjs/operators';
 
 import {
-  ISuggestValue,
-  ISuggestValues,
-  SuggestDirection,
+    ISuggestValue,
+    ISuggestValues,
+    SuggestDirection,
 } from './models';
 import { UI_SUGGEST_ANIMATIONS } from './ui-suggest.animations';
 import { UiSuggestIntl } from './ui-suggest.intl';
 import { UiSuggestMatFormField } from './ui-suggest.mat-form-field';
 import {
-  caseInsensitiveCompare,
-  generateLoadingInitialCollection,
-  inMemorySearch,
-  mapInitialItems,
-  resetUnloadedState,
-  setLoadedState,
-  setPendingState,
-  sortByPriorityAndDirection,
-  toSuggestValue,
+    caseInsensitiveCompare,
+    generateLoadingInitialCollection,
+    inMemorySearch,
+    mapInitialItems,
+    resetUnloadedState,
+    setLoadedState,
+    setPendingState,
+    sortByPriorityAndDirection,
+    toSuggestValue,
 } from './utils';
 
 /**
@@ -113,6 +113,8 @@ export class UiSuggestComponent extends UiSuggestMatFormField
         return this._disabled;
     }
     public set disabled(value) {
+        if (this._disabled === !!value) { return; }
+
         this._disabled = !!value;
         if (
             value &&
@@ -123,6 +125,16 @@ export class UiSuggestComponent extends UiSuggestMatFormField
 
         this._cd.markForCheck();
         this.stateChanges.next();
+
+        if (value || !this.searchable) {
+            return;
+        }
+
+        if (this.searchSourceFactory) {
+            this.fetch();
+        } else {
+            this.loading$.next(false);
+        }
     }
 
     /**

projects/angular/components/ui-suggest/src/ui-suggest.component.ts

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/angular",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "license": "MIT",
   "author": {
     "name": "UiPath Inc",