shadcn-ui-expansions 项目中 MultipleSelector 组件触发重复搜索问题分析

问题背景

在 shadcn-ui-expansions 项目的 MultipleSelector 组件使用过程中，开发者发现当设置了 triggerSearchOnFocus 属性时，onSearch 回调函数会被意外地调用两次。这不仅影响了性能，还可能导致数据请求的重复执行，给应用带来不必要的负担。

问题表现

具体表现为：

1. 当点击输入框获取焦点时，搜索函数会被执行两次
2. 每输入一个字符时，搜索函数同样会被执行两次

技术分析

通过查看源代码，我们发现问题的根源在于组件的 onFocus 事件处理逻辑中。组件在获取焦点时，不仅会设置打开状态，还会在 triggerSearchOnFocus 为 true 时主动触发搜索操作。然而，这种设计导致了搜索逻辑的重复执行。

解决方案

官方修复方案

项目维护者已经确认这是一个需要修复的问题，并提供了直接的解决方案：移除 onFocus 事件处理程序中对 onSearch 的显式调用。具体修改如下：

onFocus={(event) => {
    setOpen(true);
    // 移除下面这行代码即可解决问题
    // triggerSearchOnFocus && onSearch?.(debouncedSearchTerm);
    inputProps?.onFocus?.(event);
}}

临时解决方案

在官方修复发布前，开发者可以采用以下替代方案：使用 inputProps 的 onFocus 属性来手动处理搜索逻辑：

<MultipleSelector
    inputProps={{
        onFocus: async () => {
            const res = await getAllTags(account_id);
            setOptions(res);
        },
    }}
    // 其他属性...
/>

这种方法虽然需要手动管理搜索逻辑，但可以有效避免重复调用的问题。

最佳实践建议

1. 性能优化：对于网络请求类的搜索操作，建议添加适当的防抖处理，避免频繁触发
2. 状态管理：考虑使用状态管理库来缓存搜索结果，减少不必要的重复请求
3. 错误处理：确保搜索操作有完善的错误处理机制，特别是在网络请求场景下
4. 组件封装：对于频繁使用的搜索选择器，可以考虑封装高阶组件统一处理这类边界情况

总结

shadcn-ui-expansions 项目中的 MultipleSelector 组件是一个功能丰富的多选组件，但在特定配置下会出现搜索重复触发的问题。通过理解问题本质和采用适当的解决方案，开发者可以避免这一陷阱，构建更高效的应用。

对于开源项目使用者来说，遇到类似问题时，除了寻找临时解决方案外，积极向项目维护者反馈问题并参与社区讨论，也是推动项目完善的重要方式。