Show existing tags as autocomplete suggestions 🏷️

[anoopcodehack]

Show existing tags as autocomplete suggestions 🏷️

File: client/src/components/Task/TaskModal.jsx

Every time you type tags you retype
same ones from scratch 💀 fr!!

Fix: collect existing tags for suggestions:
const existingTags = [...new Set(
tasks.flatMap(t => t.tags || [])
)]

const lastTag = form.tags.split(',').pop().trim()
const suggestions = lastTag.length > 0
? existingTags.filter(t =>
t.includes(lastTag) && t !== lastTag
)
: []

{suggestions.length > 0 && (

{suggestions.map(tag => ( { const tags = form.tags.split(',') tags[tags.length-1] = tag setForm({...form, tags: tags.join(',') + ','}) }} className="text-[10px] px-2 py-0.5 bg-[#2a2a2f] text-[#888] rounded-full hover:text-purple-400 transition"> + {tag} ))}

)}

~15 lines! No backend needed 🎯

[Mario-Mohar]

Hi @anoopcodehack, could I take this one as my second issue?

Small heads up on the snippet: t.includes(lastTag) is case sensitive, so typing rea suggests nothing when the existing tag is React. The rest of the codebase compares tags case insensitively, handleAddTag in useSuggestTags.jsx does it that way and the server dedupes in sanitizeTags. I'd lowercase both sides for the match and still insert the tag in its original spelling.

The other thing is that the suggestions should exclude the tags already sitting in the field, not just the last one being typed. Otherwise it offers a tag you picked a moment ago, the server drops the duplicate on save, and the click looks like it did nothing.

Frontend only, TaskModal.jsx, no backend change.