[Feature request] "Always open" mode for more flexible use of multiselect

[yk1711]

In one of the UI's I'm implementing the requirement is for a button to open a popover with multiselect-type options.

I think having an alwaysOpen prop would open multiselect for more flexible use cases like this one. Sometimes there is a need to control multiselect dropdown visibility externally rather than only rely on search input focus and I think this kind of prop multiplies what can be done with multiselect.

I've had to do it in my fork and it's relatively easy with few additions. Would you consider adding this into the core ?

[pczarn]

Hi. Adding yet another configuration option is something to think about. We will let you know next week

[gjamot]

Hi. I am actually developing the same behaviour and i want to know if it's possible to add a prop to update isOpen data value ?

[sky-code]

+1 for this feature. inline mode some times better than dropdown for usability and so on.

Default html select tag with multiple attribute is inline, will be good to have same feature in vue-multiselect.

[onhernandes]

+1 for this one!

[vesper8]

would like this as well.. a way to have it always expanded but with a fixed height and scrollable pane if content exceeds the height

[shankarho]

+1

[shentao]

This will be possible in the 3.0 release. Please be patient.

[EdgarsSalmins]

This will be possible in the 3.0 release. Please be patient.

when is 3.0 release scheduled?

[openpathgit]

Would love it, when is 3.0?

[sombatos]

+1

[mwager]

Any updates (or workarounds) here?

[vesper8]

Any way to achieve this currently with v2? Also, is this option available as part of the v3 branch currently? @shentao ?

[doutatsu]

This is something else I am looking to do, I have very similar requirements as @yk1711. If this is still in development, how did you manage to get it working @yk1711?

[itslit-tech]

@doutatsu As a workaround, to have the multiselect open by default, you can set a ref on the multiselect component and call the activate method on the ref element. For example, assign a ref to the component

<multiselect
      ref="your_ref_name"
.....
/>

and then call the activate method by this.$refs["your_ref_name"].activate();

[euizong]

<multiselect :multiple="true" openDirection="bottom"
:close-on-select="false" :clear-on-select="false" ref="multiselect" @close="closeEventHandler"

..... /> mounted(){ this.$refs.multiselect.isOpen = ture; } closeEventHandler(){ this.$refs.multiselect.isOpen = ture; }

[akashjain132]

The above code was not working for me so I did it using CSS code.

<---- HTML CODE ----->

<multiselect v-model="value" ref="multiselect" @close="closeEventHandler" open-direction="bottom" :hide-selected="true" :close-on-select="false" :clear-on-select="false" :options="options" :multiple="true" group-values="libs" group-label="language" :group-select="true" placeholder="Type to search" track-by="name" label="name"><span slot="noResult">Oops! No elements found. Consider changing the search query.</span></multiselect>

<---- CSS CODE ----->

 .multiselect {
  min-height: 400px;
}
.multiselect .multiselect__input {
  width: 100% !important;
  position: static !important;
  padding: inherit !important;
}
.multiselect .multiselect__content-wrapper {
  display: block !important;
  height: auto !important;
  max-height: 300px !important;
  position: static;
}
.multiselect .multiselect__placeholder {
  display: none !important;
}
.multiselect .multiselect__tags {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.multiselect--above .multiselect__content-wrapper {
  bottom: inherit;
  border-radius: 0;
  border-bottom: none;
  border-top: none;
}
.multiselect .multiselect__select {
  display: none;
}

<---- JS CODE ----->

methods: {
    closeEventHandler() {
      this.$refs.multiselect.isOpen = true;
    },
},

[nikosdrog]

Make a function and call it to your component like the below example

function openMultiselect() {
  nextTick(() => {
    if (multiselectRef.value) {
      multiselectRef.value.activate();
    }
  });
}

<Multiselect
  ref="multiselectRef"
  @close="openMultiselect"
/>