Reset Multi-mode Listbox (React)

[tsr-rise8]

All information can be seen in this discussion post.

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.14

What browser are you using?

Chrome

Reproduction URL

<form
  onSubmit={(e) => {
    e.preventDefault()
    handleSubmission(Object.fromEntries(new FormData(e.target as HTMLFormElement)))
  }}
>
  <Listbox
    name="assignee"
    by="id"
    defaultValue={[] as { id: number; name: string; label: string }[]}
    multiple
  >
    <Listbox.Button>
      {({ value }) =>
        value.length > 0
          ? value.map((v: { id: number; name: string; label: string }) => v.name)
          : 'Trigger'
      }
    </Listbox.Button>
    <Listbox.Options>
      {data.map((person) => (
        <Listbox.Option key={person.id} value={person}>
          {person.label}
        </Listbox.Option>
      ))}
    </Listbox.Options>
  </Listbox>
  <button id="submit">submit</button>
  <button type="reset" id="reset">
    reset
  </button>
</form>

I tried to open a PR since it is a small issue undeserving of a whole repo for reproducing but was denied access.

Describe your issue

See the discussion post from above.

[thecrypticace]

Hey, thanks for the report! This should be fixed by #2626, and will be available in the next release.

You can already try it using — though it may take a few minutes before it is available on NPM:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.