Combobox: ComboboxOption value ID with ComboboxInput displayValue not working as expected

[kskrlinnorth2]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.6.5

What browser are you using?

Chrome

Describe your issue

// props.data
[
  { id: 1, name: 'Leslie Alexander', username: '@lesliealexander', img: 'img-url' },
  { id: 2, name: 'John Doe', username: '@johndoe', img: 'img-url' },
]

If I want to show in ComboboxInput user name via displayValue then I must set value in ComboboxOption to user object, however this saves v-model value as that object, and not ID. Since option values are usually either IDs or simple keys, and not full objects how to setup code to use ID as option value , but in the same time name as input display value?
There is nothing in docs how to achive this behavior, so I guess it's a bug.

I was required to create custom function to achieve this, which is, in my opition, an additional unnecessary filter, which should be available via component.

function displayValue(id) {
  return props.data.find((item) => item.id === id).name;
}

<ComboboxInput :display-value="(id) => displayValue(id)" />

EDIT: I also noticed that onchange event doesn't send new value to backend.

[alexbu92]

This... is very big issue if someone wants to use the combobox as an uncontrolled input. 99% of the time the value needs to be an id but the displayValue should be something like the name..