Cannot read properties of undefined (reading '__CREATE__')

[masdh]

I am attempting to add new items, but it doesn't seem to be working as expected.

<Multiselect
  :options="items"
  :mode="single"
  v-model="value"
  :create-option="true"
  :append-new-option="true"
  @create="createItem"
>
<template v-slot:option="{ option }">
  <div v-if="option.__CREATE__">
      + Create {{ option.label }}
  </div>
  <div class="flex items-center text-sm" v-else>
     {{ option.label }}
  </div>
  </template>
</Multiselect>

createItem(option, select) {
  console.log("create option?", option);
  console.log("create select?", select);
}

When I type any new word, and I choose that new word to be created the following error appears:

Uncaught TypeError: Cannot read properties of undefined (reading '__CREATE__')
    at handleOptionSelect (multiselect.mjs:597:16)
    at Proxy.handleOptionClick (multiselect.mjs:593:5)
    at onClick (multiselect.mjs:2903:42)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at HTMLLIElement.invoker (runtime-dom.esm-bundler.js:278:5)

Am I missing something ?

[adamberecz]

Can't reproduce this. Feel free to reopen with a full reproducible example.

[shroomlife]

Hey, I have some kind of a related issue here I think. I use Nuxt 3 and have the following issue. I created a repository with just Nuxt and this repository. When I want to add a new Category there is an error coming up from the package.

The repository: https://github.com/shroomlife/vueform-multiselect-example

I also created a screen capture for better debugging. You can find it in the repository at screen-capture.webm

The error message:

Uncaught TypeError: Cannot read properties of undefined (reading '__CREATE__')
    at handleOptionSelect (multiselect.mjs:597:16)
    at Proxy.handleOptionClick (multiselect.mjs:593:5)

Do you have any tips or can see what I am doing wrong or is the issue related to the Nuxt integration?

[jaguadoromero]

I'm very surprised that none of the developers of this library have given an answer to this "bug" in over a year and the only answer has been that it is not reproducible and they close the issue, when the problem is the poor documentation on the "onCreate" event 😳.

I had this same problem today, apparently the "onCreate" event requires you to return the option object.

In the example provided by @masdh the code should look like this in the createItem function:

createItem(option, select) {
    console.log("create option?", option);
    console.log("create select?", select);

    return option; // <-- this is the key
}