feat: preserve highlighting on tag escape keydown

sadmann7 · Feb 22, 2025 · 86c9053 · 86c9053
1 parent 17df4d3
commit 86c9053
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/docs/app/(lobby)/pg/page.tsx b/docs/app/(lobby)/pg/page.tsx
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { tricks } from "@/lib/data";
+import TagsInputDemo from "@/registry/default/examples/tags-input-demo";
 import {
   Combobox,
   ComboboxAnchor,
@@ -40,6 +41,7 @@ import { ChevronDown } from "lucide-react";
 export default function PlaygroundPage() {
   return (
     <Shell>
+      <TagsInputDemo />
       <Combobox className="w-[15rem]">
         <ComboboxAnchor>
           <ComboboxInput placeholder="Search tricks..." />

diff --git a/packages/tags-input/src/tags-input-item-text.tsx b/packages/tags-input/src/tags-input-item-text.tsx
@@ -66,6 +66,7 @@ function TagsInputEditableItemText() {
       } else if (event.key === "Escape") {
         setEditValue(itemContext.displayValue);
         context.setEditingIndex(null);
+        context.setHighlightedIndex(itemContext.index);
         context.inputRef.current?.focus();
       }
       event.stopPropagation();
@@ -78,6 +79,8 @@ function TagsInputEditableItemText() {
       context.inputRef.current?.focus,
       editValue,
       itemContext.value,
+      context.setHighlightedIndex,
+      itemContext.index,
     ],
   );
 

diff --git a/packages/tags-input/src/tags-input-root.tsx b/packages/tags-input/src/tags-input-root.tsx
@@ -481,22 +481,23 @@ const TagsInputRoot = React.forwardRef<
           break;
         }
         case "Escape": {
-          setHighlightedIndex(null);
-          setEditingIndex(null);
+          if (highlightedIndex !== null) setHighlightedIndex(null);
+          if (editingIndex !== null) setEditingIndex(null);
           requestAnimationFrame(() => target.setSelectionRange(0, 0));
           break;
         }
       }
     },
     [
+      dir,
+      editingIndex,
       highlightedIndex,
       value,
       onItemRemove,
-      dir,
+      getEnabledItems,
       editable,
       disabled,
       loop,
-      getEnabledItems,
     ],
   );