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 <[email protected]>
haiilo · Nov 18, 2024 · 56045d2 · 56045d2
1 parent 46f982f
commit 56045d2
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git 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: '<ng-content></ng-content>',
   // 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
@@ -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
@@ -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}
             ></input>
@@ -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
@@ -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
@@ -404,6 +404,7 @@ export const CatTag = /*@__PURE__*/ defineContainer<JSX.CatTag>('cat-tag', undef
   'errors',
   'errorUpdate',
   'tagCreationChars',
+  'addOnBlur',
   'catChange',
   'catFocus',
   'catBlur'