Work with HeadlessUI / Terracotta

[captDaylight]

I realize I'm working with Terracotta and SolidJS in this example, but the resulting dom structure is roughly the same when I create one of the elements as with HeadlessUI.

The problem I'm having is the component isn't being picked up by Felte. Say I use a Listbox (it's not an actual <select> with <option>s, rather it's divs and list items masquerading as such), when I submit with a basic example the option is not getting capturede.

Here's a simple reproduction with Codesandbox.

[captDaylight]

I ended up solving this with Custom Form Controls.

  const { field, onInput } = createField(props.name); // pass a name into my custom Listbox

// then later
        <Listbox
        ref={field}
        defaultOpen={false}
        value={selected()}
        onSelectChange={(a: any) => {
          setSelected(a);
          onInput(a.name);
        }}
        class="relative shadow-sm rounded-lg"
      >