diff --git a/.changeset/heavy-otters-grow.md b/.changeset/heavy-otters-grow.md new file mode 100644 index 0000000000..74cdcbe439 --- /dev/null +++ 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 index fb2cb038c4..e34834351b 100644 --- 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 index dd2b457013..72f9aa8f09 100644 --- 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 index 4efccf1c60..34135d5e4b 100644 --- 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: [