fix(tags-input): only exclude tag items in interaction outside

Author: segunadebayo

.changeset/upset-readers-wear.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/tags-input": patch
+---
+
+Fix issue where highlighted item doesn't clear when tabbing out of the input to an external button within the `control`
+part.

e2e/models/tags-input.model.ts

@@ -14,6 +14,14 @@ export class TagsInputModel extends Model {
     return this.page.locator("[data-testid=input]")
   }
 
+  get clearTrigger() {
+    return this.page.locator("[data-part=clear-trigger]")
+  }
+
+  getTagElements() {
+    return this.page.locator("[data-part=item]")
+  }
+
   getTag(value: string) {
     return this.page.locator(`[data-testid=${value.toLowerCase()}-tag]`)
   }
@@ -77,6 +85,10 @@ export class TagsInputModel extends Model {
     return this.getTagClose(value).click({ force: true })
   }
 
+  clickClearTrigger() {
+    return this.clearTrigger.click({ force: true })
+  }
+
   async seeTagIsHighlighted(value: string) {
     await expect(this.getTag(value)).toHaveAttribute("data-highlighted", "")
   }
@@ -85,6 +97,10 @@ export class TagsInputModel extends Model {
     await expect(this.getTag(value)).toBeVisible()
   }
 
+  async seeNoTags() {
+    return expect(this.getTagElements()).toHaveCount(0)
+  }
+
   async dontSeeTag(value: string) {
     await expect(this.getTag(value)).toBeHidden()
   }
@@ -109,7 +125,11 @@ export class TagsInputModel extends Model {
     await expect(this.getTagInput(value)).toHaveValue(value)
   }
 
-  async expectNoTagToBeHighlighted() {
+  async seeNoHighlightedTag() {
     return expect(await this.page.locator("[data-part=item][data-selected]").count()).toBe(0)
   }
+
+  async seeClearTriggerIsFocused() {
+    await expect(this.clearTrigger).toBeFocused()
+  }
 }

e2e/tags-input.e2e.ts

@@ -109,7 +109,7 @@ test.describe("tags-input", () => {
     await I.pressKey("ArrowLeft")
     await I.clickOutside()
 
-    await I.expectNoTagToBeHighlighted()
+    await I.seeNoHighlightedTag()
   })
 
   test("removes tag on close button click", async () => {
@@ -150,7 +150,7 @@ test.describe("tags-input", () => {
     await I.addTag("Svelte")
     await I.pressKey("ArrowLeft")
     await I.pressKey("Escape")
-    await I.expectNoTagToBeHighlighted()
+    await I.seeNoHighlightedTag()
   })
 
   test("delete + backspace interaction", async () => {
@@ -169,15 +169,15 @@ test.describe("tags-input", () => {
 
     await I.pressKey("Delete")
     await I.dontSeeTag("Angular")
-    await I.expectNoTagToBeHighlighted()
+    await I.seeNoHighlightedTag()
 
     await I.pressKey("Backspace")
     await I.seeTagIsHighlighted("React")
 
     await I.pressKey("Backspace")
     await I.dontSeeTag("React")
 
-    await I.expectNoTagToBeHighlighted()
+    await I.seeNoHighlightedTag()
   })
 
   test("[addOnPaste: false] pasting should work every time", async () => {
@@ -232,6 +232,26 @@ test.describe("tags-input", () => {
     await I.clickControl()
     await I.pressKey("Backspace", 1)
 
-    await I.expectNoTagToBeHighlighted()
+    await I.seeNoHighlightedTag()
+  })
+
+  test("tabbing out of input should clear highlighted tag", async () => {
+    await I.focusInput()
+
+    await I.pressKey("ArrowLeft")
+    await I.seeTagIsHighlighted("Vue")
+
+    await I.pressKey("Tab")
+    await I.seeNoHighlightedTag()
+  })
+
+  test("clear trigger should clear tags", async () => {
+    await I.addTag("Svelte")
+    await I.addTag("Solid")
+
+    await I.clickClearTrigger()
+    await I.seeNoTags()
+
+    await I.seeInputIsFocused()
   })
 })

examples/next-ts/pages/tags-input.tsx

@@ -44,6 +44,7 @@ export default function Page() {
               </span>
             ))}
             <input data-testid="input" placeholder="add tag" {...api.getInputProps()} />
+            <button {...api.getClearTriggerProps()}>X</button>
           </div>
           <input {...api.getHiddenInputProps()} />
         </div>

examples/nuxt-ts/app/pages/tags-input.vue

@@ -45,6 +45,7 @@ const api = computed(() => tagsInput.connect(service, normalizeProps))
         </span>
 
         <input data-testid="input" placeholder="add tag" v-bind="api.getInputProps()" />
+        <button v-bind="api.getClearTriggerProps()">X</button>
       </div>
       <input v-bind="api.getHiddenInputProps()" />
     </div>

examples/solid-ts/src/routes/tags-input.tsx

@@ -54,14 +54,15 @@ export default function Page() {
               )}
             </For>
             <input data-testid="input" placeholder="add tag" {...api().getInputProps()} />
+            <button {...api().getClearTriggerProps()}>X</button>
           </div>
           <input {...api().getHiddenInputProps()} />
         </div>
       </main>
 
-      {/* <Toolbar viz controls={controls}>
+      <Toolbar viz controls={controls}>
         <StateVisualizer state={service} context={["value"]} />
-      </Toolbar> */}
+      </Toolbar>
     </>
   )
 }

examples/svelte-ts/src/routes/tags-input.svelte

@@ -47,6 +47,7 @@
       {/each}
 
       <input data-testid="input" placeholder="add tag" {...api.getInputProps()} />
+      <button {...api.getClearTriggerProps()}>X</button>
     </div>
     <input {...api.getHiddenInputProps()} />
   </div>

packages/machines/tags-input/src/tags-input.dom.ts

@@ -18,6 +18,7 @@ export const getItemInputId = (ctx: Scope, opt: ItemProps) =>
 export const getEditInputId = (id: string) => `${id}:input`
 export const getEditInputEl = (ctx: Scope, id: string) => ctx.getById<HTMLInputElement>(getEditInputId(id))
 
+export const getItemEls = (ctx: Scope) => queryAll(getRootEl(ctx), `[data-part=item]`)
 export const getTagInputEl = (ctx: Scope, opt: ItemProps) => ctx.getById<HTMLInputElement>(getItemInputId(ctx, opt))
 export const getRootEl = (ctx: Scope) => ctx.getById<HTMLDivElement>(getRootId(ctx))
 export const getInputEl = (ctx: Scope) => ctx.getById<HTMLInputElement>(getInputId(ctx))

packages/machines/tags-input/src/tags-input.machine.ts

@@ -377,7 +377,8 @@ export const machine = createMachine<TagsInputSchema>({
       trackInteractOutside({ scope, prop, send }) {
         return trackInteractOutside(dom.getInputEl(scope), {
           exclude(target) {
-            return contains(dom.getRootEl(scope), target)
+            const itemEls = dom.getItemEls(scope)
+            return itemEls.some((el) => contains(el, target))
           },
           onFocusOutside: prop("onFocusOutside"),
           onPointerDownOutside: prop("onPointerDownOutside"),
@@ -402,7 +403,7 @@ export const machine = createMachine<TagsInputSchema>({
       autoResize({ context, prop, scope }) {
         let fn_cleanup: VoidFunction | undefined
 
-        const raf_cleanup = raf(() => {
+        queueMicrotask(() => {
           const editedTagValue = context.get("editedTagValue")
           const editedTagIndex = context.get("editedTagIndex")
           if (!editedTagValue || editedTagIndex == null || !prop("editable")) return
@@ -414,7 +415,6 @@ export const machine = createMachine<TagsInputSchema>({
         })
 
         return () => {
-          raf_cleanup()
           fn_cleanup?.()
         }
       },

shared/src/css/tags-input.css

@@ -9,17 +9,18 @@
   border: 1px solid #ccc;
   width: 40em;
   border-radius: 2px;
+  position: relative;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
 
-[data-scope="tags-input"][data-part="control"][data-disabled] {
-  background: #f9f9f9;
-}
+  &[data-disabled] {
+    background: #f9f9f9;
+  }
 
-[data-scope="tags-input"][data-part="control"][data-focus],
-[data-scope="tags-input"][data-part="control"]:focus {
-  outline: 2px solid var(--ring-color);
-  outline-offset: 2px;
+  &[data-focus],
+  &:focus {
+    outline: 2px solid var(--ring-color);
+    outline-offset: 2px;
+  }
 }
 
 [data-scope="tags-input"][data-part="item-preview"] {
@@ -32,19 +33,21 @@
   font: inherit;
   user-select: none;
   display: inline-block;
-}
 
-[data-scope="tags-input"][data-part="item-preview"][hidden] {
-  display: none !important;
-}
-[data-scope="tags-input"][data-part="item-preview"][data-highlighted] {
-  background-color: #777;
-  border-color: #777;
-  color: #eee;
-}
-[data-scope="tags-input"][data-part="item-preview"][data-disabled] {
-  opacity: 0.6;
-  cursor: default;
+  &[hidden] {
+    display: none !important;
+  }
+
+  &[data-highlighted] {
+    background-color: #777;
+    border-color: #777;
+    color: #eee;
+  }
+
+  &[data-disabled] {
+    opacity: 0.6;
+    cursor: default;
+  }
 }
 
 [data-scope="tags-input"][data-part*="input"] {
@@ -58,16 +61,24 @@
   font-size: 100%;
   outline: none;
   display: inline-block !important;
-}
 
-[data-scope="tags-input"][data-part*="input"][hidden] {
-  display: none !important;
-}
+  &[hidden] {
+    display: none !important;
+  }
 
-[data-scope="tags-input"][data-part*="input"]:disabled {
-  opacity: 0.6;
+  &:disabled {
+    opacity: 0.6;
+  }
 }
 
 [data-scope="tags-input"][data-part="item-delete-trigger"] {
   all: unset;
 }
+
+[data-scope="tags-input"][data-part="clear-trigger"] {
+  position: absolute;
+  top: 0;
+  right: 0.5px;
+  bottom: 0;
+  scale: 0.8;
+}