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)}