shadcn-ui-expansions 多选组件与React Hook Form集成实践

问题背景

在使用shadcn-ui-expansions项目中的Multiselect组件与React Hook Form集成时，开发者可能会遇到"elm.focus is not a function"的错误。这种错误通常发生在表单提交时，特别是当开发者尝试在组件外部管理状态时。

核心问题分析

这个错误的根本原因在于不正确的状态管理方式。开发者试图同时使用React Hook Form的form.control和本地useState来管理Multiselect组件的状态，这导致了状态管理的冲突。React Hook Form期望完全控制表单字段的状态，而外部状态的介入破坏了这种控制关系。

正确集成方案

1. 避免混合状态管理

正确的做法是让React Hook Form完全控制表单状态，不应在组件外部使用useState来管理Multiselect的值。所有表单状态应该通过React Hook Form的provider来管理。

2. 使用defaultValues设置初始值

对于需要设置初始值的场景，应该使用React Hook Form的defaultValues属性，而不是在组件外部管理状态。这样可以确保表单状态的一致性，避免出现焦点管理相关的问题。

3. 处理多选值

Multiselect组件设计用于处理对象数组（包含label和value属性）。如果需要在数据库中存储ID数组，可以在提交表单时进行转换，或者在获取数据后将ID数组转换为组件所需的格式。

组件优化建议

1. 水平滚动条实现

当选择项过多导致组件宽度扩展过大时，可以考虑添加水平滚动条。这可以通过包装选择标签区域实现，确保UI在有限空间内保持整洁。

2. 国际化支持

对于需要国际化的应用，可以将翻译函数作为prop传递给Multiselect组件，在组件内部处理标签的翻译，而不是在外部管理翻译后的字符串。

最佳实践总结

1. 完全依赖React Hook Form管理表单状态
2. 使用defaultValues设置初始选项
3. 在表单提交时处理数据格式转换
4. 考虑添加滚动条处理大量选项情况
5. 在组件内部实现国际化支持

通过遵循这些实践，可以避免常见的集成问题，同时保持代码的整洁和可维护性。