fix(tags): delete key behavior

chakra-ui · Oct 8, 2024 · 309ec9e · 309ec9e
1 parent 8de6e8f
commit 309ec9e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/heavy-otters-grow.md b/.changeset/heavy-otters-grow.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/tags-input": patch
+---
+
+Fix issue where tags input doesn't navigate tags after removing with the delete key
diff --git a/.xstate/tags-input.js b/.xstate/tags-input.js
@@ -169,6 +169,7 @@ const fetchMachine = createMachine({
           actions: ["deleteHighlightedTag", "highlightPrevTag"]
         }],
         DELETE: {
+          target: "focused:input",
           actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
         },
         PASTE: [{

diff --git a/e2e/tags-input.e2e.ts b/e2e/tags-input.e2e.ts
@@ -47,6 +47,18 @@ test.describe("tags-input", () => {
     await I.dontSeeTag("Vue")
   })
 
+  test("delete tag with delete key, show allow keyboard navigation", async () => {
+    await I.focusInput()
+    await I.pressKey("ArrowLeft")
+    await I.pressKey("Delete")
+
+    await I.seeInputIsFocused()
+    await I.dontSeeTag("Vue")
+
+    await I.pressKey("ArrowLeft")
+    await I.seeTagIsHighlighted("React")
+  })
+
   test("delete tag with pointer, show allow keyboard navigation", async () => {
     await I.clickTagClose("Vue")
 

diff --git a/packages/machines/tags-input/src/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts
@@ -209,6 +209,7 @@ export function machine(userContext: UserDefinedContext) {
               },
             ],
             DELETE: {
+              target: "focused:input",
               actions: ["deleteHighlightedTag", "highlightTagAtIndex"],
             },
             PASTE: [