feat: TagsInput remove last element on Backspace (#2528)

* feat: TagsInput remove last element on Backspace * Update TagsInput.tsx
coingaming · Feb 12, 2024 · daebd28 · daebd28
1 parent 9546872
commit daebd28
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/next-docs/pages/components/tagsInput.tsx b/next-docs/pages/components/tagsInput.tsx
@@ -25,10 +25,13 @@ const PageTagsInput = () => {
       >
         <p>{text}</p>
         <p>
-          These selected text entries are being dispalyed as tags. Tags represent a set of interactive keywords that help organise and categorise objects.
+          These selected text entries are being displayed as tags. Tags
+          represent a set of interactive keywords that help organize and
+          categorize objects.
         </p>
         <p>
-          Tags can be added by pressing the Enter key or removed by the mouse click from the input element.
+          Tags can be added by pressing the Enter key or removed by Backspace
+          key or the mouse click from the input element.
         </p>
       </ComponentPageDescription>
 
@@ -120,15 +123,15 @@ const PageTagsInput = () => {
             type: '(value: string) => void;',
             required: false,
             default: '-',
-            description: 'The function to select the text and append it to the tag set.',
+            description:
+              'The function to select the text and append it to the tag set.',
           },
           {
             name: 'onClear',
             type: '(index: number) => void',
             required: false,
             default: '-',
-            description:
-              'The function to remove the selected tag.',
+            description: 'The function to remove the selected tag.',
           },
         ]}
       />

diff --git a/workspaces/core/src/tagsInput/TagsInput.tsx b/workspaces/core/src/tagsInput/TagsInput.tsx
@@ -85,6 +85,11 @@ const TagsInputRoot = forwardRef<HTMLSpanElement, TagsInputRootProps>(
                   onEnter((e.target as HTMLInputElement).value);
                 e.code === 'Enter' &&
                   ((e.target as HTMLInputElement).value = '');
+                e.code === 'Backspace' &&
+                  (e.target as HTMLInputElement).value === '' &&
+                  selected.length !== 0 &&
+                  onClear &&
+                  onClear(selected.length - 1);
               }}
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}