Combobox: input defaultValue change when displayValue change

[olivierpascal]

Problem: as Combobox displayValue change, the input defaultValue also change.

From what I understand, displayValue is an arbitrary value that is used to map a value to a value used for presentation only.
The defaultValue should not change between renders.

What package within Headless UI are you using?
What version of that package are you using?

@headlessui/react@v1.7.18

What browser are you using?

Chrome, Firefox

Reproduction URL

https://codesandbox.io/p/devbox/inspiring-smoke-5w6ccj

This is the Combobox demo. What I've changed:

const CustomInput = forwardRef(function CustomInput(props, ref) {
  console.log('defaultValue:', props.defaultValue);
  return <input ref={ref} {...props} />;
})

// ...

<Combobox.Input
  as={Fragment}
  displayValue={(person) => String(Math.random())}
>
  <CustomInput onChange={(event) => setQuery(event.target.value)} />
</Combobox.Input>

As you type in the input field, the defaultValue is changing to match the random displayValue.

[RobinMalfait]

Hey!

This should be fixed by #3048, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.