javascriptvue.jsvue-multiselect

Toggle vue-multiselect close/open on button click


When I click on the button, multiselect opens. But when I click on the button a second time, the true / false values ​​flash and as a result, isOpen remains true. What am I doing wrong?

template:

<div id="app">
  <button @click="toggle">open and close later
  </button>
    <pre>{{ isOpen }}</pre>
  <multiselect 
    ref="multiselect"
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    @close="isOpen = false"
    @open="isOpen = true"
    >
  </multiselect>
</div>

js:

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    isOpen: false,
    value: { language: 'JavaScript', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
    },
  methods: {
    toggle () {
        if (this.isOpen) {
        this.$refs.multiselect.$el.blur();
        this.isOpen = false;
      }
      else {
        this.$refs.multiselect.$el.focus();
        this.isOpen = true;
      }

    }
  }
}).$mount('#app')

https://jsfiddle.net/46s5aknt/


Solution

  • As I dug the source code of this component, unfortunately, I realized there is not any "legit" way to make works your requirement. @blur callback will be called no matter what. There is no way to regulate this behavior.

    Workaround: some aspect of locking with a cooldown time...

    new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      data: {
      blocked: false,
      value: { language: 'JavaScript', library: 'Vue-Multiselect' },
      options: [
        { language: 'JavaScript', library: 'Vue.js' },
        { language: 'JavaScript', library: 'Vue-Multiselect' },
        { language: 'JavaScript', library: 'Vuelidate' }
      ]
    },
      methods: {
        toggle () {
          if (!this.blocked) {
            this.$refs.multiselect.toggle();
          }
        },
        block () {
          this.blocked = true;
          setTimeout(() => {
            this.blocked = false;
          }, 200);
        }
      }
    }).$mount('#app')