sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.64k stars 1.34k forks source link

Conditionally close the dropdown when an item is selected #1557

Open justwiebe opened 2 years ago

justwiebe commented 2 years ago

Is your feature request related to a problem? Please describe. It would be great to conditionally close the dropdown when an item is selected

Describe the solution you'd like Make the closeOnSelect prop able to be a function that takes the list of selected options and/or the option that was just selected. It would return true or false for whether the dropdown should be closed.

Describe alternatives you've considered I am currently extending VSelect to override the onAfterSelect method:

import VSelect from 'vue-select';
import Vue from 'vue';

Vue.component('VSelect', {
  extends: VSelect,
  props: {
    closeOnSelectFunc: {
      type: Function,
      default: null
    }
  },
  methods: {
    /**
     * Override onAfterSelect functionality to allow a function prop that determines if the dropdown should be closed based on what's been selected
     * @param option {[]} list of selected options
     */
    onAfterSelect (option) {
      if (this.closeOnSelect || (this.closeOnSelectFunc && this.closeOnSelectFunc(option))) {
        this.open = !this.open;
        this.searchEl.blur();
      }

      if (this.clearSearchOnSelect) {
        this.search = '';
      }
    }
  }
});

and in my component:

<v-select
  v-model="assigneesInput"
  :options="assigneeGroups"
  :close-on-select="false"
  :close-on-select-func="options => options.map(o => o.label).includes(storeContact)"
  :select-on-tab="true"
  taggable
  multiple
  style="min-width: 225px;"
  placeholder="Assign"
/>

Additional context Add any other context or screenshots about the feature request here.