@gcforms/tag-input 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.6] - 2026-05-07
+
+- Allow passing onBlur enabling flows to mark valid and invalid addresses without requiring the user to press Enter
+
+## [1.0.5] - 2025-12-05
+
+- Remove cypress test over to vitest outside of package directory
 
 ## [1.0.4] - 2025-10-01
 
@@ -32,6 +39,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.0] - 2025-05-14
 
-### Added
-
 - Initial release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/tag-input",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {

package/src/TagInput.tsx

@@ -28,6 +28,7 @@ export const TagInput = ({
   restrictDuplicates = true,
   allowSpacesInTags = true,
   maxTags,
+  onBlur,
   onTagAdd,
   onTagRemove,
   validateTag,
@@ -42,6 +43,10 @@ export const TagInput = ({
   restrictDuplicates?: boolean;
   allowSpacesInTags?: boolean;
   maxTags?: number;
+  onBlur?: (
+    event: React.FocusEvent<HTMLInputElement>,
+    helpers: { addTag: (tag: string) => void }
+  ) => void;
   onTagAdd?: (tag: string) => void;
   onTagRemove?: (tag: string) => void;
   validateTag?: (tag: string) => {
@@ -214,6 +219,10 @@ export const TagInput = ({
     }
   };
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    onBlur?.(event, { addTag: handleAddTag });
+  };
+
   return (
     <div className="gc-tag-input-container" onClick={() => tagInputRef.current?.focus()}>
       <label htmlFor={id} className="gc-tag-input-label">
@@ -244,6 +253,7 @@ export const TagInput = ({
           name={name}
           type="text"
           placeholder={placeholder}
+          onBlur={handleBlur}
           onKeyDown={handleKeyDown}
           ref={tagInputRef}
         />

package/src/tests/TagInput.cy.tsx

@@ -1,239 +0,0 @@
-"use client";
-import React from "react";
-
-import { TagInput } from "../TagInput";
-
-describe("<TagInput />", () => {
-  it("renders without crashing", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} />
-      </div>
-    );
-  });
-
-  it("accepts initial tags", () => {
-    cy.mount(
-      <div>
-        <TagInput
-          initialTags={["Tag one", "Tag two", "Tag three"]}
-          onTagAdd={() => {}}
-          onTagRemove={() => {}}
-        />
-      </div>
-    );
-
-    cy.get(".gc-tag").should("have.length", 3);
-    cy.get(".gc-tag").should("contain", "Tag one");
-    cy.get(".gc-tag").should("contain", "Tag two");
-    cy.get(".gc-tag").should("contain", "Tag three");
-  });
-
-  it("sets the name attribute", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} name="test-name" />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").should("have.attr", "name", "test-name");
-  });
-
-  it("adds a custom label", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} label="Custom Label" />
-      </div>
-    );
-
-    cy.get(".gc-tag-input-label").should("contain", "Custom Label");
-  });
-
-  it("adds a custom description", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} description="Custom Description" />
-      </div>
-    );
-
-    cy.get(".gc-tag-input-description").should("contain", "Custom Description");
-  });
-
-  it("adds a tag", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
-    cy.get("[data-testid='tag-input']").should("have.value", "");
-    cy.get(".gc-tag").should("contain", "New Tag");
-  });
-
-  it("announces that a tag was added", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} />
-      </div>
-    );
-    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
-    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "New Tag" added`);
-  });
-
-  it("restricts duplicates", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={["Tag 1"]} restrictDuplicates={true} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("Tag 1{enter}");
-    cy.get("[data-testid='tag-input']").should("have.value", "");
-    cy.get(".gc-tag").should("have.length", 1);
-  });
-
-  it("announces that a duplicate tag was added", () => {
-    cy.mount(
-      <div>
-        <TagInput restrictDuplicates={true} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("Tag 1{enter}Tag 1{enter}");
-    cy.get("#tag-input-live-region").should("exist").and("contain", `"Tag 1" is a duplicate tag`);
-  });
-
-  it("allows duplicates", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={["Tag 1"]} restrictDuplicates={false} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("Tag 1{enter}");
-    cy.get("[data-testid='tag-input']").should("have.value", "");
-    cy.get(".gc-tag").should("have.length", 2);
-  });
-
-  it("removes a tag", () => {
-    const onTagRemove = cy.stub().as("onTagRemove");
-
-    cy.mount(
-      <div>
-        <TagInput initialTags={["Tag 1", "Tag 2"]} onTagAdd={() => {}} onTagRemove={onTagRemove} />
-      </div>
-    );
-
-    cy.get(".gc-tag").should("contain", "Tag 2").should("contain", "Tag 1");
-    cy.get("#tag-0 button").click();
-    cy.get(".gc-tag").should("contain", "Tag 2").should("not.contain", "Tag 1");
-    cy.get("@onTagRemove").should("have.been.calledWith", "Tag 1");
-  });
-
-  it("removes a selected tag", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={["one", "two", "three", "four", "five", "six"]} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("{leftarrow}{leftarrow}{leftarrow}{leftarrow}{del}");
-    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "three" removed`);
-    cy.get(".gc-tag").should("not.contain", "three");
-  });
-
-  it("announces when a tag is removed", () => {
-    cy.mount(
-      <div>
-        <TagInput initialTags={["Tag 1"]} onTagAdd={() => {}} onTagRemove={() => {}} />
-      </div>
-    );
-
-    cy.get(".gc-tag").should("contain", "Tag 1");
-    cy.get(".gc-tag button").click();
-    cy.get("#tag-input-live-region").should("exist").and("contain", `Tag "Tag 1" removed`);
-  });
-
-  it("calls onTagAdd handler when adding a tag", () => {
-    const onTagAdd = cy.stub().as("onTagAdd");
-
-    cy.mount(
-      <div>
-        <TagInput initialTags={[]} onTagAdd={onTagAdd} onTagRemove={() => {}} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("New Tag{enter}");
-    cy.get("[data-testid='tag-input']").should("have.value", "");
-    cy.get(".gc-tag").should("contain", "New Tag");
-    cy.get("@onTagAdd").should("have.been.calledWith", "New Tag");
-  });
-
-  it("calls onTagRemove handler when removing a tag", () => {
-    const onTagRemove = cy.stub().as("onTagRemove");
-
-    cy.mount(
-      <div>
-        <TagInput initialTags={["Tag one", "Tag two"]} onTagRemove={onTagRemove} />
-      </div>
-    );
-
-    cy.get(".gc-tag").should("contain", "Tag one");
-    cy.get(".gc-tag").first().find("button").click();
-    cy.get("[data-testid='tag-input']").should("not.contain", "Tag one");
-    cy.get("@onTagRemove").should("have.been.calledWith", "Tag one");
-  });
-
-  it("validates the tag according to the validation function", () => {
-    const validateTag = (tag: string) => {
-      const errors: string[] = [];
-
-      if (tag.length < 3) {
-        errors.push("Tag must be at least 3 characters long");
-      }
-
-      if (/\d/.test(tag)) {
-        errors.push("Tag must not include numbers");
-      }
-
-      if (tag.length > 10) {
-        errors.push("Tag must be at most 10 characters long");
-      }
-
-      return {
-        isValid: errors.length === 0,
-        errors: errors,
-      };
-    };
-
-    cy.mount(
-      <div>
-        <TagInput validateTag={validateTag} />
-      </div>
-    );
-
-    cy.get("[data-testid='tag-input']").type("ab{enter}");
-    cy.get("[data-testid='tag-input-error'] div").should("have.length", 1);
-    cy.get("[data-testid='tag-input-error']").should(
-      "contain",
-      "Tag must be at least 3 characters long"
-    );
-
-    cy.get("[data-testid='tag-input']").type("abcdefghijklmnopqrstuvwxy{enter}");
-    cy.get("[data-testid='tag-input-error'] div").should("have.length", 1);
-    cy.get("[data-testid='tag-input-error']").should(
-      "contain",
-      "Tag must be at most 10 characters long"
-    );
-
-    // Multiple errors
-    cy.get("[data-testid='tag-input']").type("T1{enter}");
-    cy.get("[data-testid='tag-input-error'] div").should("have.length", 2);
-    cy.get("[data-testid='tag-input-error']").should(
-      "contain",
-      "Tag must be at least 3 characters long"
-    );
-    cy.get("[data-testid='tag-input-error']").should("contain", "Tag must not include numbers");
-  });
-});