[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.