Example of using with Tailwind Headless UI

[thejoyfuldev]

I saw a few individuals having trouble using this with Tailwind Headless UI. More specifically, they are receiving errors about not being able to pass ref to function components. This is caused by attempting to use spread syntax to pass all arguments from field (including ref) into Listbox (or other component).

      <Controller
        name="custom-select"
        control={control}
        render={({ field }) => (
          <ListBox {...field} as="div">       // <------------ Issue is here
            <ListBox.Button>Select Person</ListBox.Button>
            <ListBox.Options>
              {people.map((person) => (
                <ListBox.Option
                  key={person.id}
                  value={person}
                  disabled={person.unavailable}
                >
                  {person.name}
                </ListBox.Option>
              ))}
            </ListBox.Options>
          </ListBox>
        )}
      />

There are many ways to solve this. The first, would be to destructure field

- <ListBox {...field} as="div">
+ render={({ field: { value, onChange } }) => (
- <ListBox.Button>Select Person</ListBox.Button>
+ <ListBox value={value} onChange={(value) => onChange(value)}>

The option that I personally prefer since I am typically creating a custom component anyway is to further integrate react-hook-form and use the hook useController. This allows my calling component to be much cleaner and reduce the overall lines within my form.

I've included the gist and sandbox below to show this option.

Gist: Headless UI with React Hook Forms
Codesandbox