Bugs on Listbox for Multiselect when states & handlers are passed from props

[nriin-marifin]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.19

What browser are you using?

Chrome

Reproduction URL

Stackblitz Repro

Describe your issue

There is a bug with selection handler if I define a listbox with multiple flag with states & state handlers passed from props. It works okay if I define the options, selected & handleSelect on the component, but it doesn't work when I refactor the component into a reusable one with props. Basically, every selected items will always get reselected & didn't get tracked as selected element.

This component works. This is where I define everything inside of the reusable component:

type Option = {
  label: string;
  value: string | number;
};

const people: Option[] = [
  { label: 'Durward Reynolds', value: 1 },
  { label: 'Kenton Towne', value: 2 },
  { label: 'Therese Wunsch', value: 3 },
  { label: 'Benedict Kessler', value: 4 },
  { label: 'Katelyn Rohan', value: 5 },
];

function MultiSelectNoProps() {
  const [selectedPeople, setSelectedPeople] = useState<Option[]>([]);

  return (
    <div className="relative w-full">
      <Listbox multiple onChange={setSelectedPeople} value={selectedPeople}>
        <Listbox.Button className="bg-blue-50 p-2 w-full">
          {selectedPeople.map((option) => option.label).join(', ')}
        </Listbox.Button>
        <Listbox.Options className="absolute bg-red-100 p-2 z-[99]">
          {people.map((option) => (
            <Listbox.Option key={option.value.toString()} value={option}>
              {({ active, selected }) => (
                <p className={twMerge(selected && 'bg-blue-300', active && 'bg-gray-300')}>
                  {option.label}
                </p>
              )}
            </Listbox.Option>
          ))}
        </Listbox.Options>
      </Listbox>
    </div>
  );
}

When I define the state & handlers from props, it doesn't work. Every selected items will get reselected again and again with no limits. This is very weird.

type MultiSelectProps = {
  onSelect: (options: Option[]) => void;
  options: Option[];
  selected: Option[];
};

function MultiSelectWithProps({ onSelect, options, selected }: MultiSelectProps) {
  return (
    <div className="relative w-full">
      <Listbox multiple onChange={onSelect} value={selected}>
        <Listbox.Button className="bg-blue-50 p-2 w-full">
          {selected.map((option) => option.label).join(', ')}
        </Listbox.Button>
        <Listbox.Options className="absolute bg-red-100 p-2 z-[99]">
          {options.map((option) => (
            <Listbox.Option key={option.value.toString()} value={option}>
              {({ active, selected: selectedOption }) => (
                <p className={twMerge(selectedOption && 'bg-blue-300', active && 'bg-gray-300')}>
                  {option.label}
                </p>
              )}
            </Listbox.Option>
          ))}
        </Listbox.Options>
      </Listbox>
    </div>
  );
}

function MultiSelectWrapper() {
  const options: Option[] = [
    { label: 'Durward Reynolds', value: 1 },
    { label: 'Kenton Towne', value: 2 },
    { label: 'Therese Wunsch', value: 3 },
    { label: 'Benedict Kessler', value: 4 },
    { label: 'Katelyn Rohan', value: 5 },
  ];

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

  return <MultiSelectWithProps onSelect={setSelected} options={options} selected={selected} />;
}

[RobinMalfait]

Hey!

The issue you are seeing is that you are defining your options array inside of the MultiSelectWrapper. When you choose a new value from the Listbox component, the MultiSelectWrapper component will re-render and it will re-create the array and all of its objects.

This means that all your objects are new instances and we don't know which one is selected because comparing them using === will always result in false now.

There are a few solutions to this problem:

1. Make sure the objects are stable references across re-renders.
2. Add a unique identifier such as an id, then in the Listbox you can use the by="id" prop that allows you to compare options based on a specific field. More info: https://headlessui.com/react/listbox#binding-objects-as-values

In Headless UI v2 we will automatically compare by the id property if it is present.

Hope this helps!

[nriin-marifin]

Thanks @RobinMalfait. Will try to update with your suggestion!