fix: tags input delete behavior

chakra-ui · Nov 8, 2024 · aba6af0 · aba6af0
1 parent 75be963
commit aba6af0
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 0 deletions.
diff --git a/.changeset/pink-files-double.md b/.changeset/pink-files-double.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/tags-input": patch
+---
+
+Fix issue where delete behavior is inconsistent between states.
diff --git a/.xstate/tags-input.js b/.xstate/tags-input.js
@@ -22,10 +22,12 @@ const fetchMachine = createMachine({
     "clearOnBlur": false,
     "hasTags && isInputCaretAtStart": false,
     "hasTags && isInputCaretAtStart": false,
+    "hasHighlightedTag": false,
     "addOnPaste": false,
     "hasTags && isInputCaretAtStart && !isLastTagHighlighted": false,
     "isTagEditable && hasHighlightedTag": false,
     "isFirstTagHighlighted": false,
+    "hasHighlightedTag": false,
     "addOnPaste": false,
     "isInputRelatedTarget": false,
     "isEditedTagEmpty": false
@@ -129,6 +131,10 @@ const fetchMachine = createMachine({
           cond: "hasTags && isInputCaretAtStart",
           actions: "highlightLastTag"
         },
+        DELETE: {
+          cond: "hasHighlightedTag",
+          actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+        },
         PASTE: [{
           cond: "addOnPaste",
           actions: ["setInputValue", "addTagFromPaste"]
@@ -169,7 +175,10 @@ const fetchMachine = createMachine({
           cond: "isFirstTagHighlighted",
           actions: ["deleteHighlightedTag", "highlightFirstTag"]
         }, {
+          cond: "hasHighlightedTag",
           actions: ["deleteHighlightedTag", "highlightPrevTag"]
+        }, {
+          actions: ["highlightLastTag"]
         }],
         DELETE: {
           target: "focused:input",
@@ -231,6 +240,7 @@ const fetchMachine = createMachine({
     "clearOnBlur": ctx => ctx["clearOnBlur"],
     "!hasHighlightedTag": ctx => ctx["!hasHighlightedTag"],
     "hasTags && isInputCaretAtStart": ctx => ctx["hasTags && isInputCaretAtStart"],
+    "hasHighlightedTag": ctx => ctx["hasHighlightedTag"],
     "addOnPaste": ctx => ctx["addOnPaste"],
     "hasTags && isInputCaretAtStart && !isLastTagHighlighted": ctx => ctx["hasTags && isInputCaretAtStart && !isLastTagHighlighted"],
     "isTagEditable && hasHighlightedTag": ctx => ctx["isTagEditable && hasHighlightedTag"],

diff --git a/e2e/models/tags-input.model.ts b/e2e/models/tags-input.model.ts
@@ -42,6 +42,10 @@ export class TagsInputModel extends Model {
     await this.page.keyboard.press("Enter")
   }
 
+  clickTag(value: string) {
+    return this.getTag(value).click()
+  }
+
   focusInput() {
     return this.input.focus()
   }

diff --git a/e2e/tags-input.e2e.ts b/e2e/tags-input.e2e.ts
@@ -148,6 +148,33 @@ test.describe("tags-input", () => {
     await I.expectNoTagToBeHighlighted()
   })
 
+  test("delete + backspace interaction", async () => {
+    await I.addTag("Svelte")
+    await I.addTag("Angular")
+
+    await I.clickTag("Vue")
+
+    await I.pressKey("Delete")
+    await I.seeTagIsHighlighted("Svelte")
+    await I.dontSeeTag("Vue")
+
+    await I.pressKey("Delete")
+    await I.seeTagIsHighlighted("Angular")
+    await I.dontSeeTag("Svelte")
+
+    await I.pressKey("Delete")
+    await I.dontSeeTag("Angular")
+    await I.expectNoTagToBeHighlighted()
+
+    await I.pressKey("Backspace")
+    await I.seeTagIsHighlighted("React")
+
+    await I.pressKey("Backspace")
+    await I.dontSeeTag("React")
+
+    await I.expectNoTagToBeHighlighted()
+  })
+
   test("[addOnPaste: false] pasting should work everytime", async () => {
     await I.paste("Svelte")
     await I.seeInputHasValue("Svelte")

diff --git a/packages/machines/tags-input/src/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts
@@ -161,6 +161,10 @@ export function machine(userContext: UserDefinedContext) {
               guard: and("hasTags", "isInputCaretAtStart"),
               actions: "highlightLastTag",
             },
+            DELETE: {
+              guard: "hasHighlightedTag",
+              actions: ["deleteHighlightedTag", "highlightTagAtIndex"],
+            },
             PASTE: [
               {
                 guard: "addOnPaste",
@@ -208,8 +212,12 @@ export function machine(userContext: UserDefinedContext) {
                 actions: ["deleteHighlightedTag", "highlightFirstTag"],
               },
               {
+                guard: "hasHighlightedTag",
                 actions: ["deleteHighlightedTag", "highlightPrevTag"],
               },
+              {
+                actions: ["highlightLastTag"],
+              },
             ],
             DELETE: {
               target: "focused:input",