From 56045d218b8753fc80162ed98c44611f1dd25e39 Mon Sep 17 00:00:00 2001 From: Anastasiia Glushkova Date: Mon, 18 Nov 2024 16:28:40 +0100 Subject: [PATCH] feat(core): emit catChange on blur for cat-tag (#605) * feat(core): emit catChange on blur for cat-tag * feat(core): fix linter * feat(core): fix docs --------- Co-authored-by: anastasiia_glushkova --- .../catalyst/src/lib/directives/proxies.ts | 2 ++ core/src/components.d.ts | 8 +++++ core/src/components/cat-tag/cat-tag.tsx | 31 ++++++++++++++----- core/src/components/cat-tag/readme.md | 1 + vue/src/components.ts | 1 + 5 files changed, 36 insertions(+), 7 deletions(-) diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts index 03e70219..a43cd33d 100644 --- a/angular/projects/catalyst/src/lib/directives/proxies.ts +++ b/angular/projects/catalyst/src/lib/directives/proxies.ts @@ -1164,6 +1164,7 @@ export declare interface CatTabs extends Components.CatTabs { @ProxyCmp({ inputs: [ + 'addOnBlur', 'clearable', 'disabled', 'errorUpdate', @@ -1187,6 +1188,7 @@ export declare interface CatTabs extends Components.CatTabs { template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property inputs: [ + 'addOnBlur', 'clearable', 'disabled', 'errorUpdate', diff --git a/core/src/components.d.ts b/core/src/components.d.ts index e1255d21..597553f4 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1270,6 +1270,10 @@ export namespace Components { * An input that allows multiple values to be entered as tags. */ interface CatTag { + /** + * Whether new tag is added when the input is blurred. + */ + "addOnBlur": boolean; /** * Whether the input should show a clear button. */ @@ -3568,6 +3572,10 @@ declare namespace LocalJSX { * An input that allows multiple values to be entered as tags. */ interface CatTag { + /** + * Whether new tag is added when the input is blurred. + */ + "addOnBlur"?: boolean; /** * Whether the input should show a clear button. */ diff --git a/core/src/components/cat-tag/cat-tag.tsx b/core/src/components/cat-tag/cat-tag.tsx index 5049b041..542d0e78 100644 --- a/core/src/components/cat-tag/cat-tag.tsx +++ b/core/src/components/cat-tag/cat-tag.tsx @@ -119,6 +119,11 @@ export class CatTag { */ @Prop() tagCreationChars: string[] = [' ']; + /** + * Whether new tag is added when the input is blurred. + */ + @Prop() addOnBlur = false; + /** * Emitted when the value is changed. */ @@ -148,13 +153,7 @@ export class CatTag { const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input; if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) { event.preventDefault(); - if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) { - this.value = [...(this.value ?? []), this.input.value.trim()]; - this.catChange.emit(this.value); - } - if (this.input) { - this.input.value = ''; - } + this.addInputValue(); } else if ( ['Backspace'].includes(event.key) && this.input?.selectionStart === 0 && @@ -232,6 +231,7 @@ export class CatTag { aria-invalid={this.invalid ? 'true' : undefined} aria-describedby={this.hasHint ? this.id + '-hint' : undefined} onInput={this.onInput.bind(this)} + onBlur={this.onBlur.bind(this)} placeholder={this.placeholder} disabled={this.disabled} > @@ -283,6 +283,23 @@ export class CatTag { } } + private onBlur() { + if (this.addOnBlur) { + this.addInputValue(); + } + } + + private addInputValue() { + const inputValue = this.input?.value.trim(); + if (inputValue && !this.value?.includes(inputValue)) { + this.value = [...(this.value ?? []), inputValue]; + this.catChange.emit(this.value); + } + if (this.input) { + this.input.value = ''; + } + } + private clear() { this.value = []; this.catChange.emit(this.value); diff --git a/core/src/components/cat-tag/readme.md b/core/src/components/cat-tag/readme.md index 1152a73f..b67d8b93 100644 --- a/core/src/components/cat-tag/readme.md +++ b/core/src/components/cat-tag/readme.md @@ -13,6 +13,7 @@ An input that allows multiple values to be entered as tags. | Property | Attribute | Description | Type | Default | | ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ | +| `addOnBlur` | `add-on-blur` | Whether new tag is added when the input is blurred. | `boolean` | `false` | | `clearable` | `clearable` | Whether the input should show a clear button. | `boolean` | `false` | | `disabled` | `disabled` | Whether the select is disabled. | `boolean` | `false` | | `errorUpdate` | `error-update` | Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors change with the given delay in milliseconds or immediately on blur. | `boolean \| number` | `0` | diff --git a/vue/src/components.ts b/vue/src/components.ts index c7292ddb..90788ab0 100644 --- a/vue/src/components.ts +++ b/vue/src/components.ts @@ -404,6 +404,7 @@ export const CatTag = /*@__PURE__*/ defineContainer('cat-tag', undef 'errors', 'errorUpdate', 'tagCreationChars', + 'addOnBlur', 'catChange', 'catFocus', 'catBlur'