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

[ztosyl]

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').

[gllmp]

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 #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()
}

[roelVerdonschot]

I get the same error

[tomassabol]

same here

[10111282]

Same error when using dynamic-options-provider. Happens If immediately leave the page while options are still being fetched.

[nerminjukan]

Same error when search input is closed, i.e. searching for a tag and selecting the tag triggers the error.