Mantine TagsInput组件重复元素删除问题解析

问题背景

Mantine UI库中的TagsInput组件在处理重复元素删除时存在一个值得注意的行为特性。当组件设置为允许重复元素(allowDuplicates=true)时，用户点击删除某个重复元素会同时删除所有相同值的元素，这可能不符合某些应用场景的预期行为。

技术细节分析

TagsInput组件是Mantine提供的一个标签输入控件，允许用户输入多个标签项。该组件提供了一个allowDuplicates属性，用于控制是否允许输入重复的标签值。当该属性设置为true时，理论上应该允许用户输入多个相同值的标签。

然而在实际操作中，当用户点击某个标签的删除按钮时，组件会删除所有相同值的标签，而不是仅删除用户点击的那一个。这种行为源于组件内部实现时对所有相同值标签的统一处理逻辑。

解决方案探讨

针对这一问题，社区贡献者提出了一个潜在的修复方案：修改删除逻辑，使用数组的splice方法精确删除指定索引位置的元素，而不是基于值进行删除。这种修改可以确保：

1. 当allowDuplicates为false时，保持原有行为不变
2. 当allowDuplicates为true时，仅删除用户点击的特定标签项

实现建议

对于需要精确控制标签删除行为的开发者，可以考虑以下解决方案：

1. 等待官方合并修复补丁
2. 临时扩展TagsInput组件，重写删除逻辑
3. 在业务层添加额外的处理逻辑，手动管理标签状态

总结

Mantine的TagsInput组件在处理重复标签删除时的这一行为特性，展示了UI组件设计中边界情况处理的重要性。开发者在使用时需要特别注意这一行为是否符合业务需求，必要时可参考社区讨论的解决方案进行定制化处理。