Vue-multiselect: Uncaught error on backspace

[NoahStahl]

Steps to reproduce

1. Go to https://vue-multiselect.js.org/ (as example, same occurs in my project)
2. Open dev tools
3. Place cursor into example input.
4. Press backspace.
5. Observe error in console: Uncaught TypeError: Cannot read property '$isDisabled' of undefined

Expected behaviour

Backspace ignored if no value

Actual behaviour

Error in console.

[juanpscotto]

I have the same error

[shentao]

Thanks for reporting! Gonna work on this in a few days unless someone wants to pick this up :)

[phlegx]

Found the line multiselectMixin.js#L602. Option is undefined and should be checked first. The undefined option comes from here multiselectMixin.js#L635.

[Alex-Sokolov]

@shentao hi! Can you say when planned release with this fix?

[dgriego]

hey, @NoahStahl, @juanpscotto, @phlegx, @Alex-Sokolov, and @shentao a long story short, I solved the issue for me by utilizing the blockKeys prop like so

multiselect(
   v-model="value"
  :options="options"
  :block-keys="['Delete']"
)

search for blockKeys here http://localhost:8080/#sub-props

How I found this was I followed the errors to the removeLastElement function. I saw here a function guard utilizing blockKeys to prevent the Delete key from triggering removeElement, but this is not the default value, so when the drop-down is active, and you hit the escape key, a search action will trigger.

This results in this.internalValue[this.internalValue.length - 1] evaluating to undefined, since the array is empty, hence why option is undefined.

    removeLastElement () {
      /* istanbul ignore else */
      if (this.blockKeys.indexOf('Delete') !== -1) return
      /* istanbul ignore else */
      if (this.search.length === 0 && Array.isArray(this.internalValue) {
        this.removeElement(this.internalValue[this.internalValue.length - 1], false)
      }
    }

It's seems reasonable to set ['Delete'] as a default value to blockKeys or always return when the escape key is pressed as it doesnt' seem to serve any purpose when searching or selecing anyways (as far as I can tell at least).

    /**
     * Array of keyboard keys to block
     * when selecting
     * @default 1000
     * @type {String}
    */
    blockKeys: {
      type: Array,
      default () {
        return ['Delete']
      }
    }

anyways, I hope this helps :)

[juanpscotto]

@dgriego Thanks man!! I tried that trick you said and it works well!. Thanks for the help.

[jackkoppa]

Thanks for PR #939, @phlegx :+1: Looking forward to the patch