Merge pull request #216 from UiPath/fix/suggest_issues

fix: suggest issues

Author: anbalase

CHANGELOG.md

@@ -1,3 +1,10 @@
+# v13.2.1 (2022-03-04)
+* **chore** karma bump
+* **suggest** add tests
+* **suggest** refocus post item selection
+* **suggest** on multiple always clear input
+* **suggest** push custom item only on single select
+
 # v13.2.0 (2022-02-23)
 * **suggest** add input for removable chips
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "13.2.0",
+  "version": "13.2.1",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"
@@ -140,7 +140,7 @@
     "jasmine-expect": "^4.0.3",
     "jasmine-spec-reporter": "~5.0.0",
     "json": "^9.0.6",
-    "karma": "~6.3.2",
+    "karma": "^6.3.17",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~3.3.0",

package.json

@@ -1088,6 +1088,16 @@ const sharedSpecifications = (
         });
 
         describe('With custom', () => {
+            function addByClickCustomValue(str: string) {
+                searchFor(str, fixture);
+                fixture.detectChanges();
+                tick(5000);
+
+                fixture.debugElement.query(By.css('.custom-item')).nativeElement
+                    .dispatchEvent(EventGenerator.click);
+                fixture.detectChanges();
+            }
+
             function addCustomValue(str: string) {
                 searchFor(str, fixture);
                 fixture.detectChanges();
@@ -1158,6 +1168,35 @@ const sharedSpecifications = (
                 expect(`${chips}`).toEqual(`A,B,C`);
             }));
 
+            it('should preserve input focus on click custom value', fakeAsync(() => {
+                const input = fixture.debugElement.query(By.css('.mat-chip-list input'));
+                addByClickCustomValue('A');
+                tick(1000);
+                expect(document.activeElement).toBe(input.nativeElement);
+            }));
+
+            it('should NOT add custom value on close if input is populated', fakeAsync(() => {
+                searchFor('test', fixture);
+                fixture.detectChanges();
+                tick(5000);
+                expect(uiSuggest.inputControl.value).toEqual('test');
+
+                uiSuggest.close();
+                fixture.detectChanges();
+                tick(1000);
+
+                expect(uiSuggest.value).toEqual([]);
+            }));
+
+            it('should clear input after selection', fakeAsync(() => {
+                addCustomValue('A');
+                tick(1000);
+
+                const input: HTMLInputElement = fixture.debugElement.query(By.css('input'))!.nativeElement;
+                expect(uiSuggest.inputControl.value).toEqual('');
+                expect(input.value).toEqual('');
+            }));
+
         });
 
         describe('generic', () => {

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

@@ -79,6 +79,7 @@ import {
 
 export const DEFAULT_SUGGEST_DEBOUNCE_TIME = 300;
 export const DEFAULT_SUGGEST_DRILLDOWN_CHARACTER = ':';
+export const MAT_CHIP_INPUT_SELECTOR = '.mat-chip-list input';
 
 /**
  * A form compatible `dropdown` packing `lazy-loading` and `virtual-scroll`.
@@ -827,10 +828,12 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
     close(refocus = true) {
         if (this.alwaysExpanded || !this.isOpen) { return; }
 
-        if (this._isOnCustomValueIndex && !this.loading$.value) {
-            if (!this.multiple) {
-                this._clearSelection();
-            }
+        if (
+            this._isOnCustomValueIndex &&
+            !this.loading$.value &&
+            !this.multiple
+        ) {
+            this._clearSelection();
             this._pushEntry(toSuggestValue(this.inputControl.value.trim(), true));
         }
 
@@ -968,20 +971,20 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
         if (!isItemSelected && value) {
             if (!this.multiple) {
                 this._clearSelection();
+                this._pushEntry(value);
             } else {
-                if (value.isCustom) {
-                    this.inputControl.setValue('');
-                }
+                this.inputControl.setValue('');
+                this._pushEntry(value);
+                this._focusChipInput();
             }
-            this._pushEntry(value);
         }
 
-        if (
-            this.multiple &&
+        const alreadySelectedNormalValue = this.multiple &&
             isItemSelected &&
             !!value &&
-            !value.isCustom
-        ) {
+            !value.isCustom;
+
+        if (alreadySelectedNormalValue) {
             this._removeEntry(value);
         }
 
@@ -1279,4 +1282,9 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
     private _gotoBottomAsync(element: HTMLElement) {
         setTimeout(() => element.scrollTop = element.scrollHeight - element.clientHeight, 0);
     }
+
+    private _focusChipInput() {
+        // direct focus needed as chip component doesn't expose a focus to input mechanism
+        document.querySelector<HTMLInputElement>(MAT_CHIP_INPUT_SELECTOR)?.focus();
+    }
 }

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

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