Feature: Multi-Listbox

[itsthekeming]

I poked around and experimented some but haven't been able to find out if this is natively supported. The native select has a multiple attribute that allows the user to select multiple options.

I was able to sort of hack this into the Listbox by passing it an array, but the types in TypeScript were a bit wonky (I was using React). I was able to use a Popover with checkboxes to achieve what I wanted, but I'm wondering if this could be a supported use case.

[diego-lipinski-de-castro]

Can you provide the code you experimented?

[itsthekeming]

So if I'm remembering correctly, it looked something like this:

function App() {
  const values = ["Adam", "Eve", "Jack", "Jill"];

  const [selected, setSelected] = useState<string[]>([]);

  const handleChange = (value: string[]) => {
    // you might think that this couldn't happen because value is of type string[]
    // but when an option is clicked, it actually does pass whatever is in the value prop of the option to the onChange handler (in this case, a string)
    if (typeof value !== "string") {
      return;
    }

    if (selected.includes(value)) {
      setSelected(selected.filter((item) => item !== value));
    } else {
      setSelected([...selected, value]);
    }
  };

  return (
    <div>
      <p>Selected: {selected.length === 0 ? "None" : selected.join(", ")}</p>
      <Listbox value={selected} onChange={handleChange}>
        <Listbox.Button>Open</Listbox.Button>
        <Listbox.Options>
          {values.map((value) => (
            <Listbox.Option key={value} value={value}>
              {value}
              {selected.includes(value) && " (selected)"}
            </Listbox.Option>
          ))}
        </Listbox.Options>
      </Listbox>
    </div>
  );
}

I'm sure this messes up the accessibility of the component too, so in the end I think we went when a Popover implementation instead.