Can't send a different value than the displayValue with the Combobox component.

[akeldamas]

Issue:

I'm having trouble with the "Combobox" component. I've bound an object to it and set the displayValue property to the value I want. However, I'm unable to submit a different value than the display value.

When I change the value of the Combobox.Option component to the desired value, it only passes that value to the displayValue property, while ignoring the option value onSubmit. Below is a small code example where I want to send the value property instead of the name property, but when I press send, I keep getting returned the name property or any value that is inside the displayValue property.

This behavior seems weird because the documentation explicitly states that this component can take complex objects, yet it only takes a display value and ignores the rest of the object. Is there a way to make the displayValue and the submitted value different?

Desired behavior:

That the displayed value is different from the submitted value.

Screenshot:

Code:

import { useState } from "react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import { Combobox } from "@headlessui/react";

const people = [
  { id: 1, name: "Leslie Alexander", value: "user1" },
];
export default function Home() {
  const [query, setQuery] = useState("");
  const [selectedPerson, setSelectedPerson] = useState(null);

  const filteredPeople =
    query === ""
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase());
        });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Get the form data.
    const form = e.currentTarget;
    const data = new FormData(form);
    const entries = Object.fromEntries(data.entries());
    console.log(entries);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Combobox as="div" value={selectedPerson} onChange={setSelectedPerson}>
        <Combobox.Label>Assigned to</Combobox.Label>
        <div>
          <Combobox.Input
            name="user"
            onChange={(event) => setQuery(event.target.value)}
            displayValue={(person: { id: number; name: string }) =>
              person?.name
            }
          />
          <Combobox.Button>
            <ChevronUpDownIcon aria-hidden="true" />
          </Combobox.Button>

          {filteredPeople.length > 0 && (
            <Combobox.Options>
              {filteredPeople.map((person) => (
                <Combobox.Option key={person.id} value={person}>
                  {({ active, selected }) => (
                    <>
                      <span>{person.name}</span>

                      {selected && (
                        <span>
                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
                        </span>
                      )}
                    </>
                  )}
                </Combobox.Option>
              ))}
            </Combobox.Options>
          )}
        </div>
      </Combobox>
      <button type="submit">send</button>
    </form>
  );
}