diff --git a/packages/frontend/core/src/components/tags/tags-editor.tsx b/packages/frontend/core/src/components/tags/tags-editor.tsx index a472ffe2e3..1adc987aae 100644 --- a/packages/frontend/core/src/components/tags/tags-editor.tsx +++ b/packages/frontend/core/src/components/tags/tags-editor.tsx @@ -55,20 +55,28 @@ export const TagsEditor = ({ }: TagsEditorProps) => { const t = useI18n(); const [inputValue, setInputValue] = useState(''); - const filteredTags = tags.filter(tag => tag.value.includes(inputValue)); + + const trimmedInputValue = inputValue.trim(); + + const filteredTags = tags.filter(tag => + tag.value.toLowerCase().includes(trimmedInputValue.toLowerCase()) + ); const inputRef = useRef(null); - const exactMatch = filteredTags.find(tag => tag.value === inputValue); - const showCreateTag = !exactMatch && inputValue.trim(); + const exactMatch = filteredTags.find(tag => tag.value === trimmedInputValue); + const showCreateTag = !exactMatch && trimmedInputValue; // tag option candidates to show in the tag dropdown const tagOptions: TagOption[] = useMemo(() => { if (showCreateTag) { - return [{ create: true, value: inputValue } as const, ...filteredTags]; + return [ + { create: true, value: trimmedInputValue } as const, + ...filteredTags, + ]; } else { return filteredTags; } - }, [filteredTags, inputValue, showCreateTag]); + }, [filteredTags, showCreateTag, trimmedInputValue]); const [focusedIndex, setFocusedIndex] = useState(-1); const [focusedInlineIndex, setFocusedInlineIndex] = useState(