From 950077fe111266c7c332b8b109f90949a0b81294 Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Sat, 10 May 2025 21:22:17 +0000
Subject: [PATCH] Improve tag input component by adding badge variant support
 and refactor

Updates TagInput component to support BadgeVariant types and refactors the ref implementation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: bddfbb2b-6d6b-457b-b18c-05792cdaa035
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/90b5f3d2-0e18-45bc-a027-dfc7f3a05b12.jpg
---
 client/src/components/ui/tag-input.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/src/components/ui/tag-input.tsx b/client/src/components/ui/tag-input.tsx
index 6d445ea..c605478 100644
--- a/client/src/components/ui/tag-input.tsx
+++ b/client/src/components/ui/tag-input.tsx
@@ -126,6 +126,9 @@ export interface TagInputProps
   tagRenderer?: (tag: TagItem, index: number, onRemove: () => void) => React.ReactNode;
 }
 
+// Define permitted badge variants to match the Badge component
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
+
 export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
   tags = [],
   onTagsChange,
@@ -154,16 +157,8 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
   const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions);
   const inputRef = useRef<HTMLInputElement>(null);
   
-  // Merge refs
-  const mergedRef = (el: HTMLInputElement | null) => {
-    // Update inner ref
-    if (el) inputRef.current = el;
-    
-    // Forward to external ref
-    if (typeof ref === 'function') {
-      ref(el);
-    }
-  };
+  // Create an internal ref that doesn't get forwarded
+  const internalRef = useRef<HTMLInputElement | null>(null);
   
   // Focus the input when clicking the container
   const focusInput = () => {
@@ -291,7 +286,7 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
     return (
       <Badge 
         key={`${tag.value}-${index}`}
-        variant={tag.variant || "default"}
+        variant={(tag.variant as BadgeVariant) || "default"}
         className={cn(
           "m-1 max-w-full truncate",
           tag.disabled && "opacity-60",
@@ -343,7 +338,7 @@ export const TagInput = forwardRef<HTMLInputElement, TagInputProps>(({
         {!readOnly && (
           <div className="flex flex-1 items-center min-w-[180px]">
             <input
-              ref={mergedRef}
+              ref={ref}
               type="text"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}