Mantine TagsInput组件中onChange事件重复触发问题解析

问题现象

在使用Mantine UI库的TagsInput组件时，开发者发现了一个特定场景下的异常行为：当用户通过键盘方向键选择下拉选项并按下Enter键时，如果之前进行了搜索操作，onChange事件会被触发两次。具体表现为：

1. 第一次触发时会提交当前的搜索词（如输入"re"）
2. 第二次触发才会提交实际选择的选项值（如"react"）

这种不一致的行为只出现在以下特定场景：

• 用户进行了搜索操作
• 使用键盘方向键+Enter选择选项
• 而鼠标点击选择或没有搜索词时则表现正常

问题根源分析

经过技术分析，这个问题源于TagsInput组件的事件处理逻辑存在一个小缺陷。当用户按下Enter键时，组件会同时触发两个逻辑：

1. 默认的Enter键提交行为 - 提交当前输入框中的值
2. 选项选择行为 - 提交当前高亮的选项值

在正常流程中，这两个行为应该互斥。当有选项被高亮时，应该优先处理选项选择行为，而忽略默认的Enter提交行为。

解决方案

修复这个问题的核心思路是：在事件处理逻辑中加入条件判断，当检测到有选项被高亮时，阻止默认的Enter键提交行为。

具体实现需要考虑以下几点：

1. 检测当前是否有选项处于高亮状态
2. 在高亮状态下，Enter键只触发选项选择逻辑
3. 无高亮状态时，保持原有的Enter键提交行为

相关发现

在分析过程中还注意到一个有趣的现象：TagsInput组件中存在一个未使用的prop selectFirstOptionOnChange。这个prop虽然出现在文档中，但在实际代码中并未实现任何功能。这可能是从其他类似组件（如Select/MultiSelect）复制代码时遗留下来的。

最佳实践建议

对于使用TagsInput组件的开发者，建议：

1. 在需要精确控制输入行为的场景下，注意测试键盘交互
2. 考虑在onChange处理函数中加入防抖逻辑，避免意外多次触发
3. 关注组件更新日志，及时获取修复版本

总结

Mantine作为一个流行的React UI库，其TagsInput组件在大多数场景下表现良好。这个特定的键盘交互问题虽然不影响主要功能，但对于追求完美用户体验的项目来说值得关注。通过理解问题本质，开发者可以更好地使用和定制组件行为，或者根据需要实现自己的修复方案。