fix: TagInput - allow spaces in tags, enable space to close tags (#5697)

* Add allowSpacesInTags attribute, enable space to close tag if not allowed

* Fix styling of input to fill available space without wrapping

* Use allowSpacesInTags prop

* Bump version + changelog

---------

Co-authored-by: Tim Arney <timarney@users.noreply.github.com>

Author: dsamojlenko

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/email-tags/EmailTags.tsx

@@ -33,6 +33,7 @@ export const EmailTags = ({
         }}
         label={t("share.emailLabel", { ns: "form-builder" })}
         description=""
+        allowSpacesInTags={false}
         onTagAdd={(tag) => {
           setTags([...new Set([...tags, tag])]);
         }}

packages/tag-input/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.1] - 2025-06-12
+
+### Added
+
+- Add allowSpacesInTags prop. When false, enable space to close tags.
+
+### Fixed
+
+- Improved styling on tag input element
+
 ## [1.0.0] - 2025-05-14
 
 ### Added

packages/tag-input/package.json

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

packages/tag-input/src/TagInput.tsx

@@ -26,6 +26,7 @@ export const TagInput = ({
   placeholder,
   description,
   restrictDuplicates = true,
+  allowSpacesInTags = true,
   maxTags,
   onTagAdd,
   onTagRemove,
@@ -39,6 +40,7 @@ export const TagInput = ({
   placeholder?: string;
   description?: string;
   restrictDuplicates?: boolean;
+  allowSpacesInTags?: boolean;
   maxTags?: number;
   onTagAdd?: (tag: string) => void;
   onTagRemove?: (tag: string) => void;
@@ -136,7 +138,12 @@ export const TagInput = ({
     resetMessages();
 
     const { key } = event;
-    const acceptKeys = [keys.ENTER, keys.TAB, keys.COMMA];
+    const acceptKeys = [
+      keys.ENTER,
+      keys.TAB,
+      keys.COMMA,
+      ...(allowSpacesInTags ? [] : [keys.SPACE]),
+    ];
     const navigateKeys = [keys.ARROW_LEFT, keys.ARROW_RIGHT];
 
     // Clear selection when entering text input

packages/tag-input/src/styles.css

@@ -55,7 +55,9 @@
   }
 
   input {
-    display: inline-block;
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 120px;
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
     padding-left: 0.5rem;