Reactive Options list error on typeahead when single option selected

[shaydoc]

Version

• Vue version: 3

Description

When an option is selected and attempting to seacrch/filter the list, the error below arises. The issue is that the options list is computed and is set to react as the filter changes. the reasons are 2 fold. We have datasource, but if the datasource has less than 50 items we filter client side, else we filter via an api call. the data loading is also declarative in this instance.

<Multiselect
    v-model="assignees"
    ref="peoplepickerRef"
    :closeOnSelect="false"
    :filterResults="false"
    :searchable="false"
    :groups="true"
    :options="itemsMap" // **This is computed**
    :loading="loading"
    trackBy="name"
    label="name"
    @select="userSelected()"
  >
 <template v-slot:beforelist>
      <h1>Before List</h1>
      <input type="text" v-model="filter" />
    </template>
....

multiselect.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at multiselect.js:1
    at multiselect.js:1
    at callWithErrorHandling (runtime-core.esm-bundler.js:6666)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6675)
    at Array.job (runtime-core.esm-bundler.js:7066)
    at flushPreFlushCbs (runtime-core.esm-bundler.js:6839)
    at updateComponentPreRender (runtime-core.esm-bundler.js:4337)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4249)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160)
    at updateComponent (runtime-core.esm-bundler.js:4137)

"function" != typeof a.options && l(o, (function(e, u) {
        J.value = a.options,
        Object.keys(R.value).length || Se(),
        function() {
            if (ee.value)
                if ("single" === s.value) {
                    var e = he(R.value[k.value])[f.value];
                    R.value[f.value] = e,
                    F.value && (M.value[f.value] = e)
                } else
                    R.value.forEach((function(e, u) {
                        var t = he(R.value[u][k.value])[f.value];
                        R.value[u][f.value] = t,
                        F.value && (M.value[u][f.value] = t)
                    }
                    ))
        }()
    }

Demo

See Fiddle here: JSFiddle error

[shaydoc]

This is specifically blowing up within the refreshLabels function within useOptions

[adamberecz]

I'd love to help @shaydoc but please post a reproducible example. Also have you thought about using async options instead of computed and just returning locally stored results when it's below 50 hits?

[shaydoc]

@adamberecz I have worked around this issue, will close here, thanks for replying, great work!