[combobox] value gets cleared if shape of value differs from items

[freshgiammi]

Bug report

Current behavior

Currently, there seems to be an issue where the Combobox's value get cleared everytime the user performs a selection if the shape of items does not match the one of value.

A problematic usage looks like this:

type User = { id: string; name: string; email: string }

const users: User[] = [
  { id: "u1", name: "Alice Johnson", email: "alice.johnson@example.com" },
  { id: "u2", name: "Bob Smith", email: "bob.smith@example.com" },
  { id: "u3", name: "Charlie Lee", email: "charlie.lee@example.com" }
]

return (
  <Combobox.Root items={users}>
    {/* when rendering items: */}
    {(item: User) => <Combobox.Item value={item.id}>{item.name}</Combobox.Item>}
  </Combobox.Root>
)

Selecting items that set the value as something different that the full item cause the value to be updated, but removed immediately after - the origin of this issues seems to be this effect.

Additionally, the effect invokes isItemEqualToValue with a possibly invalid first argument (at least, considering this shape) since Value might be different to the items value provided to Combobox.Root.

#3824 fixes this by removing the effect, but I'm opening an issue anyway since this appears to be a different issue to the two that the PR fixes.

Expected behavior

The Combobox shouldn't clear valid values only because the items and value objects differ (or if it should, the signature for isItemEqualToValue should be less restricted)

Reproducible example

https://stackblitz.com/edit/yichkwiw?file=src%2FApp.tsx

Base UI version

v1.1.0

Which browser are you using?

Chrome

Which OS are you using?

MacOS

Which assistive tech are you using (if applicable)?

Voiceover/JAWS etc.

Additional context

Provide any additional context that might help us identify the problem and find a solution.

[atomiks]

Additionally, the effect invokes isItemEqualToValue with a possibly invalid first argument (at least, considering this shape) since Value might be different to the items value provided to Combobox.Root.

This is currently a limitation, where Value and the type of items in items need to match for internal operations, mentioned here. It doesn't necessarily need to be like this though, it just currently works this way for simplicity internally.

[freshgiammi]

Thank you for clarifying, right now I'm setting items as Option<T>[] where:

export type Option<T> = { value: T; label: string; icon?: React.ReactNode }

And I have to widen the itemValue value type to also check for items with the shape of items, which retains the value and skips clearing it.

This is a bit counterintuitive since it wasn't in the documentation (unless I missed it).
If this is intentional perhaps it should be noted? Unless this specific case is a bug, considering #3824 removes this issue