mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 04:51:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve tag input component by adding badge variant support and refactor

Browse Source 
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
This commit is contained in:
mukimovd 2025-05-10 21:22:17 +00:00
parent b797c83ec6
commit 950077fe11
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/ui/tag-input.tsx
View File

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