Select component is not working with react-hook-form

[Jiseeeh]

Here's the snippet:

<Select
        className="max-w-xs"
        aria-label="Thought tag"
        {...register("tag")}
      >
        <Select.Option value={"default"} disabled>
          Select Tag
        </Select.Option>
        <Select.Option value={"Life"}>Life</Select.Option>
        <Select.Option value={"Tech"}>Tech</Select.Option>
        <Select.Option value={"Random"}>Random</Select.Option>
        <Select.Option value={"Rant"}>Rant</Select.Option>
        <Select.Option value={"Truth"}>Truth</Select.Option>
</Select>

and when I select something from the dropdown, it shows this:

I tried the native select and it works

<select className="select w-full max-w-xs" {...register("tag")}>
        <option disabled defaultChecked>
          Select Tag
        </option>
        <option value={"Life"}>Life</option>
        <option value={"Tech"}>Tech</option>
        <option value={"Random"}>Random</option>
        <option value={"Rant"}>Rant</option>
        <option value={"Truth"}>Truth</option>
</select>

Please let me know if this problem is specific to me or it is not really working, thank you.

[Jiseeeh]

Here is the sandbox link:

https://codesandbox.io/s/white-leftpad-ged5ms

[seba5dev]

I'm getting the same error, as I see, the Select component only sends the selected value.

[seba5dev]

On https://github.com/daisyui/react-daisyui/blob/ec58afbd58a9d1b2a5274c81f0c0667e21ff2845/src/Select/Select.tsx#L62 that could be the error? It appears to send the value.

[Jiseeeh]

Yeah maybe that's the case, because it shows that the property name is undefined when selecting a value from the dropdown.

I'll use the native select for now while the issue is not yet resolved.

[benjitrosch]

@Jiseeeh @seba5dev thanks for finding this, I'll look into it. I'm not too familiar with react-hook-form because I've never used it, so if anybody has a better understanding of how it works/what it expects to plug into on a <select> please feel free to contribute a fix!

[christianblandford]

Since we expose the ref and value and onChange, I think you should be able to use the select component with react-hook-form Controller, like you would with any other component library.

Can you try it out and let us know if it works?

I use RHF fairly often so if this doesn't work I'll take a look at the code and figure out a fix

[Jiseeeh]

I tried controlling the Select component manually, without using the react-hook-form and it works just fine.

const [tag, setTag] = useState("");

<Select
  name="tag"
  value={tag}
  onChange={setTag}
  // {...register("tag")}
/>

Maybe the problem is that the onChange from the react-hook-form is not compatible with react-daisy ui's because Select's onChange takes a string? Correct me if I'm wrong.

[Jiseeeh]

I updated the react-daisyui to match the current version and this problem still insists.

I removed this line {...register("tag")} and tried to add my own onChange that logs the value and it works fine, maybe the problem is really from react-hook-form.

This doesn't bother me much so tell me if I should close this issue or not.

[benjitrosch]

Hi @Jiseeeh, give it another try now and upgrade to version 3.0.1. The referenced fix was not released yet (have been away for the holidays) but I've managed to push out a release last night.

[Jiseeeh]

Hello Sir @benjitrosch , I tried it again and it's working now. Thanks for the fix. Happy New Year!