allowTagEdit prop for inline tag editing in TagsInput

[chlee1001]

Problem

When users need to fix a typo or modify an existing tag, they must:

1. Delete the tag
2. Retype the entire content (or copy-paste from external editor)

This creates significant UX friction, especially for long tags where a small typo requires
re-entering the whole string.

Real-World Use Case

We're using Mantine in an enterprise project for a telecom company in Korea. Our users
frequently work with long descriptive tags and have consistently requested the ability to edit
tags inline rather than delete and recreate them.

Current workaround:

• Delete tag → Retype entirely
• For long text: Copy to notepad → Edit → Paste back

This is tedious and error-prone.

Proposed Solution

Add an optional allowTagEdit prop:

<TagsInput
  allowTagEdit          // Enable double-click to edit
  onTagEdit={(oldValue, newValue, index) => {}}  // Optional callback
/>

Behavior:

• Double-click on a pill → Inline edit mode
• Enter to save, Escape to cancel
• Respects existing allowDuplicates and isDuplicate validation
• Empty value removes the tag

Why Consider This?

1. Opt-in feature: allowTagEdit={false} by default — zero impact on existing users
2. Minimal API surface: Only 2 new props
3. Consistent with existing patterns: Similar to allowDuplicates, clearable, etc.
4. Enterprise demand: Real production use case with active users

Related

• Previous similar discussion: Can we make tags in TagsInput editable ? #5519
• Working implementation: [@mantine/core] TagsInput: Add allowTagEdit prop for inline pill editing #8497 (closed, but demonstrates the approach)

---

I understand this can be implemented with a custom Combobox component. However, given the real
end-user demand and the likelihood that other developers may have similar needs, I believe it
could be valuable as a built-in feature.

What do you think? I'd love to hear feedback from the maintainers and community. 🙏

---

[rtivital]

I'd rather not add this feature:

• It does not seem useful to me at all – tag can be deleted and then added back
• I do not think that there is a good UX implementation for this
• The current implementation is accessible only with mouse and hard to work with using keyboard or touch devices

[chlee1001]

Thanks again for taking the time to review! 🙏