@gcforms/tag-input 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -5,6 +5,9 @@ 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
 
@@ -36,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.5",
+  "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}
         />