@gcforms/tag-input
Advanced tools
+3
-2
@@ -8,3 +8,6 @@ # Changelog | ||
| ## [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 | ||
@@ -40,4 +43,2 @@ | ||
| ### Added | ||
| - Initial release |
+1
-1
| { | ||
| "name": "@gcforms/tag-input", | ||
| "version": "1.0.5", | ||
| "version": "1.0.6", | ||
| "author": "Canadian Digital Service", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
+10
-0
@@ -31,2 +31,3 @@ import { useRef, useState } from "react"; | ||
| maxTags, | ||
| onBlur, | ||
| onTagAdd, | ||
@@ -46,2 +47,6 @@ onTagRemove, | ||
| maxTags?: number; | ||
| onBlur?: ( | ||
| event: React.FocusEvent<HTMLInputElement>, | ||
| helpers: { addTag: (tag: string) => void } | ||
| ) => void; | ||
| onTagAdd?: (tag: string) => void; | ||
@@ -219,2 +224,6 @@ onTagRemove?: (tag: string) => void; | ||
| const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => { | ||
| onBlur?.(event, { addTag: handleAddTag }); | ||
| }; | ||
| return ( | ||
@@ -250,2 +259,3 @@ <div className="gc-tag-input-container" onClick={() => tagInputRef.current?.focus()}> | ||
| placeholder={placeholder} | ||
| onBlur={handleBlur} | ||
| onKeyDown={handleKeyDown} | ||
@@ -252,0 +262,0 @@ ref={tagInputRef} |
15592
2.72%440
2.09%