ComboBox custom matcher for the selected option

[ragulka]

ComboBox determines the selected option by performing a strict comparison between the ComboBox modelValue and the given option. I have found that sometimes, given options that are objects, this strict comparison produces a false negative result - even though the objects are identical, they're not the same instances. This can happen when the results are filtered via API - on each API response, the results list is re-created, so each result in the list is a brand new object instance.

Also, in some cases, it may be desirable to match the selected option based on a single object property, such as the ID, and ignore differences in other properties - while still maintaining the ability to get the full selected object when user makes a selection.

I understand it's possible to define the option value, and set it as the object ID, ie something like this:

<ComboBox v-model="selectedPerson">
     <CompoBoxOption v-for="person in filteredPeople" :key="person.id" :value="person.id" />
</ComboBox>

...but with this approach selectedPerson also refers to the person ID, not the full person object.

Perhaps it would be possible to either allow defining a custom matcher method, or define the property which is compared on objects do determine whether the object is selected? Not really sure what the ideal API for this would look like, but wanted to start a discussion, at least.

[hussamkhatib]

I have been facing the same issue. It works fine when static list is given.
However if it comes from an API, the selected render prop doesn't work as expected.

I have been looking at the source code, ain't able to figure out yet.

[ragulka]

The way other libraries handle this is by comparing a single property. For example, Select2 requires each object to have an id property, which is then compared. jQuery UI Autocomplete requires a value property. I would say this works for most of the time, but sometimes that requirement is too strict. Having at least an option to configure the identifier prop would be an awesome start. Making it possible to fully customize this logic via a function would be 💯 .

Note: examples below are truncated for brevity, not actual working code. The idea is to demonstrate the concept.

Perhaps something like this:

<ComboBox v-model="selectedPerson" selectionKey="id">
     <CompoBoxOption v-for="person in filteredPeople" :key="person.id" :value="person" />
</ComboBox>

And in the Combobox source code, you would compare the keys instead (if the key is provided):

let selected = computed(() =>
    match(api.mode.value, {
    [ValueMode.Single]: () => api.selectionKey
            ? toRaw(api.value.value[selectionKey]) === toRaw(props.value[selectionKey])
            : toRaw(api.value.value) === toRaw(props.value),
    [ValueMode.Multi]: () => api.selectionKey
        ? (toRaw(api.value.value) as unknown[]).find(option => option[selectionKey] === toRaw(props.value)[selectionKey])
        : (toRaw(api.value.value) as unknown[]).includes(toRaw(props.value)),
    })
)

Or, like I mentioned, even more flexible, a matcher method:

<template>
  <ComboBox v-model="selectedPerson" selectionMatcher="matchSelectedOption">
       <CompoBoxOption v-for="person in filteredPeople" :key="person.id" :value="person" />
  </ComboBox>
</template>

<script setup>
const matchSelectedOption = (mode, selectedValue, optionValue) => {
    return match(mode, {
      ['single']: () => selectedValue.someKey === optionValue.someKey,
      ['multi']: () => selectedValue.find(option => option.someKey === optionValue.someKey)
    }
}
</script>

And in Combobox source, you'd have something like this:

let selected = computed(() => api.selectionMatcher(api.mode.value, toRaw(api.value.value), toRaw(optionValue)))

The selectionMatcher could still default to existing matcher, although given that it's broken when fetching results via API, I would encourage using a more robust default matcher.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

We've implemented a version of this here: #1482

[ragulka]

Thanks! That's exactly what I was looking for! ❤️