vue-multiselect Cannot read properties of null (reading 'blur') when changing view via select on Chrome

Reproduction Link

N/A, I was unable to reproduce via a fiddle, not sure if that is set to 3.0? Here is a code snippet though that did reproduce:

<template>
  <div class="">
    <div v-if="something">
      <Multiselect
        ref="something"
        v-model="selectedOpt"
        :options="opts"
        :searchable="true"
        :group-select="false"
        :multiple="true"
        :close-on-select="false"
        @select="something = false"
      />
    </div>
    <div v-else>
      <Multiselect
        ref="somethingelse"
        v-model="selectedOpt"
        :options="opts"
        :searchable="true"
        :group-select="false"
        :multiple="true"
        :close-on-select="false"
        @select="something = true"
      />
    </div>
  </div>
</template>

<script>
import { Multiselect } from 'vue-multiselect'
import { ref } from 'vue'

export default {
  name: 'Repro',
  components: {
    Multiselect,
  },

  setup () {
    const selectedOpt = ref([])
    const something = ref(false)

    return { selectedOpt, something }
  },

  computed: {
    opts () {
      return ['switch']
    },
  },
}
</script>

Steps to reproduce

This is 3.0, on Vue 3. See above: have two multiselects that you can toggle between by choosing an option on one of them, an error will throw. This only happens on Chrome. If you trigger the select function that toggles between the selects, the error is thrown.

Expected behaviour

This works fine and throws no errors.

Actual behaviour

An error is thrown implying this.$refs.search is null, and errors on the following line:

if (typeof this.$refs.search !== 'undefined') this.$refs.search.blur();

The error is Cannot read properties of null (reading 'blur').

Mar 06 '23 18:03 ztosyl

Hi, also having the same error when unmouting the VueMultiselect component, it only occurs if the searchable prop is set to true.

The error is thrown by this condition check in multiselectMixin.js, related to PR https://github.com/shentao/vue-multiselect/pull/1497: https://github.com/shentao/vue-multiselect/blob/master/src/multiselectMixin.js#L691

if (this.searchable) {
  if (typeof this.$refs.search !== 'undefined') this.$refs.search.blur()
} else {
  if (typeof this.$el !== 'undefined') this.$el.blur()
}