Shadcn UI表单内ComboBox组件问题：无法选择值

• 检查表单状态绑定逻辑
  如果你用react-hook-form，必须用Controller组件包裹ComboBox，才能让值正确同步到表单状态，别直接用register绑定（自定义组件不支持这种方式）。示例代码：

  import { Controller } from "react-hook-form";
  import { ComboBox } from "@/components/ui/combobox";
  
  // 表单内的使用示例
  <Controller
    name="targetField"
    control={control}
    render={({ field }) => (
      <ComboBox
        {...field}
        options={[
          { value: "opt1", label: "选项1" },
          { value: "opt2", label: "选项2" },
        ]}
      />
    )}
  />
  

• 确认onValueChange的同步逻辑
  要是手动管理表单状态，得确保ComboBox的onValueChange回调能正确更新表单的state：

  const [selectedValue, setSelectedValue] = useState("");
  
  <ComboBox
    value={selectedValue}
    onValueChange={(val) => setSelectedValue(val)}
    options={yourOptionList}
  />
  

• 检查选项的value格式
  ComboBox的options数组里，每个选项的value尽量用字符串、数字这类基本类型，别直接传对象（除非你在回调里专门提取需要的字段更新表单），否则表单可能无法识别选中的值。

• 排查事件阻塞问题
  别把ComboBox放在有禁用属性、或者有阻止事件冒泡逻辑的容器里，确保下拉选项的点击事件能正常触发。

• 升级依赖版本
  旧版本的Shadcn UI ComboBox可能存在表单兼容bug，试着把@shadcn/ui和对应的Radix UI依赖（比如@radix-ui/react-combobox）更到最新稳定版。

内容的提问来源于stack exchange，提问作者Pankaj Gurav