Skip to content

Tags input caps the whole list at 20 characters 🏷️ #535

Description

@Mario-Mohar

Tags input caps the whole list at 20 characters 🏷️

File: client/src/components/Task/TaskModal.jsx (line 355)

The tags field has maxLength={20}, and that limit applies to the whole comma separated string, not to one tag. The placeholder sitting in the same input is Tags (comma separated: react, api, bug), and typing exactly that example is already 15 characters. So there is room for about two tags and nothing more.

Two things make this more than just a tight limit:

Other paths are not bound by it. The AI tag suggestions on the task card write through updateTask in hooks/useSuggestTags.jsx, and the GitHub import writes through server/routes/github.js. Neither goes through this input. A task can therefore end up with more tags than the modal will ever let you type. Open that task and the field shows all of them, but you cannot add a single character until you delete some first.

Nothing on the server asks for it. tags: [{ type: String }] in server/models/Task.js has no length constraint, and sanitizeTags only trims, drops empties and dedupes.

Fix: give the list its own constant next to the one the title already uses, and size it for a list instead of for a single tag.

const TITLE_MAX_LENGTH = 100;
const TAGS_MAX_LENGTH = 120;

<input
  type="text"
  maxLength={TAGS_MAX_LENGTH}
  placeholder="Tags (comma separated: react, api, bug)"
  value={form.tags}
  onChange={(e) => setForm({ ...form, tags: e.target.value })}
  ...
/>

One line changed plus one constant. Came up while working on #486, where clicking a suggested tag sets the value in state and is not bound by maxLength either, so the two paths can disagree about what fits.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions