From b9c85f4ac344b56d703abd46bca96c442148ee80 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Tue, 1 Mar 2022 16:14:58 +0200 Subject: [PATCH 1/6] fix(suggest): push custom item only on single select --- .../components/ui-suggest/src/ui-suggest.component.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index afffcacad..29ed6391b 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -827,10 +827,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)); } From 26ea70b4dcd70c289daac323369ac836fe6ee694 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Tue, 1 Mar 2022 16:15:26 +0200 Subject: [PATCH 2/6] fix(suggest): on multiple always clear input --- .../angular/components/ui-suggest/src/ui-suggest.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index 29ed6391b..5cdf0a54b 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -971,9 +971,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective if (!this.multiple) { this._clearSelection(); } else { - if (value.isCustom) { - this.inputControl.setValue(''); - } + this.inputControl.setValue(''); } this._pushEntry(value); } From 957fdc5fc86d2155144e316d4cefc2bfa881ad2c Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Tue, 1 Mar 2022 16:26:56 +0200 Subject: [PATCH 3/6] fix(suggest): refocus post item selection --- .../ui-suggest/src/ui-suggest.component.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index 5cdf0a54b..22b2433bf 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.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`. @@ -970,18 +971,20 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective if (!isItemSelected && value) { if (!this.multiple) { this._clearSelection(); + this._pushEntry(value); } else { 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(MAT_CHIP_INPUT_SELECTOR)?.focus(); + } } From 83cd2c56d7fe22c613826f017c5529b86458b306 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Fri, 4 Mar 2022 09:38:03 +0200 Subject: [PATCH 4/6] chore(suggest): add tests --- .../src/ui-suggest.component.spec.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts index fc89303cc..0f156013f 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts @@ -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', () => { From f72be820b1e89a2383664558ec1e874a018033cb Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Tue, 1 Mar 2022 17:08:27 +0200 Subject: [PATCH 5/6] chore: karma bump --- package-lock.json | 41 +++++++++++++++++++++++++++++------------ package.json | 2 +- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7490e3090..825baf2de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "angular-components", - "version": "13.0.0-rc.13", + "version": "13.2.0", "license": "MIT", "dependencies": { "@angular/animations": "13.2.1", @@ -80,7 +80,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", @@ -2477,6 +2477,15 @@ "node": ">=6.9.0" } }, + "node_modules/@colors/colors": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", + "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", + "dev": true, + "engines": { + "node": ">=0.1.90" + } + }, "node_modules/@commitlint/cli": { "version": "8.3.6", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-8.3.6.tgz", @@ -15183,15 +15192,15 @@ } }, "node_modules/karma": { - "version": "6.3.9", - "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz", - "integrity": "sha512-E/MqdLM9uVIhfuyVnrhlGBu4miafBdXEAEqCmwdEMh3n17C7UWC/8Kvm3AYKr91gc7scutekZ0xv6rxRaUCtnw==", + "version": "6.3.17", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz", + "integrity": "sha512-2TfjHwrRExC8yHoWlPBULyaLwAFmXmxQrcuFImt/JsAsSZu1uOWTZ1ZsWjqQtWpHLiatJOHL5jFjXSJIgCd01g==", "dev": true, "dependencies": { + "@colors/colors": "1.5.0", "body-parser": "^1.19.0", "braces": "^3.0.2", "chokidar": "^3.5.1", - "colors": "^1.4.0", "connect": "^3.7.0", "di": "^0.0.1", "dom-serialize": "^2.2.1", @@ -15200,9 +15209,10 @@ "http-proxy": "^1.18.1", "isbinaryfile": "^4.0.8", "lodash": "^4.17.21", - "log4js": "^6.3.0", + "log4js": "^6.4.1", "mime": "^2.5.2", "minimatch": "^3.0.4", + "mkdirp": "^0.5.5", "qjobs": "^1.2.0", "range-parser": "^1.2.1", "rimraf": "^3.0.2", @@ -26327,6 +26337,12 @@ "to-fast-properties": "^2.0.0" } }, + "@colors/colors": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", + "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", + "dev": true + }, "@commitlint/cli": { "version": "8.3.6", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-8.3.6.tgz", @@ -36314,15 +36330,15 @@ } }, "karma": { - "version": "6.3.9", - "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz", - "integrity": "sha512-E/MqdLM9uVIhfuyVnrhlGBu4miafBdXEAEqCmwdEMh3n17C7UWC/8Kvm3AYKr91gc7scutekZ0xv6rxRaUCtnw==", + "version": "6.3.17", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.17.tgz", + "integrity": "sha512-2TfjHwrRExC8yHoWlPBULyaLwAFmXmxQrcuFImt/JsAsSZu1uOWTZ1ZsWjqQtWpHLiatJOHL5jFjXSJIgCd01g==", "dev": true, "requires": { + "@colors/colors": "1.5.0", "body-parser": "^1.19.0", "braces": "^3.0.2", "chokidar": "^3.5.1", - "colors": "^1.4.0", "connect": "^3.7.0", "di": "^0.0.1", "dom-serialize": "^2.2.1", @@ -36331,9 +36347,10 @@ "http-proxy": "^1.18.1", "isbinaryfile": "^4.0.8", "lodash": "^4.17.21", - "log4js": "^6.3.0", + "log4js": "^6.4.1", "mime": "^2.5.2", "minimatch": "^3.0.4", + "mkdirp": "^0.5.5", "qjobs": "^1.2.0", "range-parser": "^1.2.1", "rimraf": "^3.0.2", diff --git a/package.json b/package.json index 357233ef5..a80bcd2de 100644 --- a/package.json +++ b/package.json @@ -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", From 510a7bba03b893164ed437c40bc0073100f609b8 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Fri, 4 Mar 2022 09:39:56 +0200 Subject: [PATCH 6/6] chore: version bump --- CHANGELOG.md | 7 +++++++ package-lock.json | 2 +- package.json | 2 +- projects/angular/package.json | 2 +- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c602cf20c..edf798839 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 825baf2de..bee9c742b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "angular-components", - "version": "13.2.0", + "version": "13.2.1", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index a80bcd2de..69d2f1b9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-components", - "version": "13.2.0", + "version": "13.2.1", "author": { "name": "UiPath Inc", "url": "https://uipath.com" diff --git a/projects/angular/package.json b/projects/angular/package.json index 066887c41..f6557ada1 100644 --- a/projects/angular/package.json +++ b/projects/angular/package.json @@ -1,6 +1,6 @@ { "name": "@uipath/angular", - "version": "13.2.0", + "version": "13.2.1", "license": "MIT", "author": { "name": "UiPath Inc",