NextUI Input组件isClearable属性失效问题求助

当用react-hook-form的Controller包裹NextUI的Input并开启isClearable时，点击清除按钮只会清空输入框的视觉内容，不会同步更新react-hook-form的表单状态——这是因为NextUI的清除事件默认没有触发react-hook-form的字段更新回调。

只需给Input添加onClear属性，手动调用field.onChange将字段值设为空字符串即可解决：

<Controller
  control={control}
  name="username"
  render={({ field }) => (
    <Input
      {...field}
      isClearable
      onClear={() => field.onChange('')}
      className="mb-3"
      errorMessage={errors.username?.message?.toString()}
      isInvalid={!!errors.username?.message?.toString()}
      label={<strong>Username</strong>}
      placeholder="Enter your username"
      variant="underlined"
    />
  )}
/>

核心逻辑是通过onClear事件主动通知react-hook-form更新字段状态，让表单数据和输入框视觉内容保持一致。

内容的提问来源于stack exchange，提问作者Mayeenul Islam