Possible bug: Multi-select with form field name and ReactNode in value causes stack overflow

[vincerubinetti]

I'm fairly sure this is a bug but I'll make a discussion first just to make sure.

I have a generic single/multi-select component that I'm using like this:

<Select
  label="Select"
  multi={true}
  options={
    [
      { id: "a", text: "Lorem" },
      { id: "b", text: "Ipsum", info: "123" },
      { id: "c", text: "Dolor", info: "123", icon: <FaHorse /> },
    ] as const
  }
  name="select"
/>

and the component itself looks something like this:

<Listbox name={name} form={form} multiple={multi}>
  <Listbox.Button>
    <span>label</span>
    <FaCaretDown />
  </Listbox.Button>
  <Listbox.Options>
    {options.map((option, index) => (
      <Listbox.Option key={index} value={option} as={Fragment}>
        {({ active, selected }) => (
          <li data-active={active || undefined}>
            <FaCheck style={{ opacity: selected ? 1 : 0 }} />
            <span>{option.text}</span>
            {option.info && <span>{option.info}</span>}
            {option.icon &&
              cloneElement(option.icon, {
                className: classes.icon,
              })}
          </li>
        )}
      </Listbox.Option>
    ))}
  </Listbox.Options>
</Listbox>

I've narrowed it down, and it seems like the problem only occurs when I select an option that has an icon (ReactNode) set, AND the field has a name for forms. I get an infinite re-render.

I'm guessing this has something to do with HUI computing the raw values for the form.

[vincerubinetti]

headlessui/packages/@headlessui-react/src/internal/form-fields.tsx

Line 53 in 626a253

<HoistFormFields>

[vincerubinetti]

Ended up being able to work around this by adding an invisible select just for FormData, which I kinda needed anyway because I want to control the value submitted to FormData as option.id, not the whole option object.

{/* for form data */}
<select
  style={{ display: "none" }}
  multiple={true}
  form={form}
  name={name}
  value={Array.isArray(value) ? value.map((value) => value.id) : value.id}
  onChange={() => null}
>
  {options.map((option, index) => (
    <option key={index} value={option.id} />
  ))}
</select>