[Bug]: Combobox fast-deep-equal isn't working

[unpseudocomplique]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://github.com/unpseudocomplique/repro-reka-ui-combobox

Steps to reproduce

having a v-model selected value different from retreived list value

for exemple :

const otherPeople = [
  { _id: 6, display: 'Jean mich' },
  { _id: 7, display: 'Jeanette' },
  { _id: 8, display: 'Jean' },
  { _id: 9, display: 'Albert roturier' },
] // the query here is minimal so this can be very fast
const reactiveList = ref(JSON.parse(JSON.stringify(otherPeople)))

const selectedPeople = ref([{
  ...otherPeople[0],
  someOtherFieldUsedInjoin: 'dadad' // beacause the join from bdd have this field on inital page load
}])

Describe the bug

Selected value would not be reconized because of isEqual, i guess from this line :

radix-vue/packages/radix-vue/src/Combobox/ComboboxRoot.vue

Line 157 in 79e8509

const index = modelValue.value.findIndex(i => isEqual(i, val))

The item isn't marked as selected and it won't be removed on another selection

Expected behavior

Remove if already selected & mark as selected

I guess this would be a default beaviour but would be better if just like the displayed value we can pass a function for comparaison. Like in my case i want almost always to compare mongodb _id

Something like this prop:
key-identifier="_id" or :key-identifier="(item) => item._id" or :comparaison-function="(a,b) => a._id === b._id"

Context & Screenshots (if applicable)

Exemple from my code in adition of the reproduction link :

Log results:

[zernonia]

Hey @unpseudocomplique ! Im not quite sure I understood the problem. One thing in your reproduction is wrong is becase filter-function has been deprecated.

You should follow this custom filtering to achieve the custom filtering.

[ploca14]

I have the same issue. When using objects as values and the value object is not entirely equal to the option object it is not marked as selected. Is there a way to use a particular property for the comparison instead of comparing whole objects using isEqual? For example if I want to compare using the id property.

const value = ref([
  {
    id: 'apple',
    label: 'Apple',
  },
]);
const options = [
  {
    id: 'apple',
    label: 'Apple',
    count: 19,
  },
  {
    id: 'banana',
    label: 'Banana',
    count: 15,
  },
  {
    id: 'blueberry',
    label: 'Blueberry',
    count: 13,
  },
  {
    id: 'grapes',
    label: 'Grapes',
    count: 10,
  },
  {
    id: 'pineapple',
    label: 'Pineapple',
    count: 9,
  },
];

This can happen when loading the initial selected values from the back-end. For the autocomplete we load the options along with a count, but for the initially selected options we omit the count, because it is only relevant in the autocomplete.

Minimal reproduction:

https://stackblitz.com/edit/nvjkdpeg?file=src%2FApp.vue

The option with id apple should be selected.

[zernonia]

This has been fixed by e967948 in v2.
You need to use by props to specify which field is the unique identifier. Check out the example

Sorry that this will not be fixed in v1 as there's too many refactor to be cater in to support the same props.