My code:
https://jsfiddle.net/bgarrison25/tndsmkq1/4/
Html:
<div id="app">
<label class="typo__label">Groups</label>
<multiselect
v-model="value"
: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>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
Component:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data () {
return {
options: [
{
language: 'Javascript',
libs: [
{ name: 'Vue.js', category: 'Front-end' },
{ name: 'Adonis', category: 'Backend' }
]
},
{
language: 'Ruby',
libs: [
{ name: 'Rails', category: 'Backend' },
{ name: 'Sinatra', category: 'Backend' }
]
},
{
language: 'Other',
libs: [
{ name: 'Laravel', category: 'Backend' },
{ name: 'Phoenix', category: 'Backend' }
]
}
],
value: [
{ name: 'Laravel', category: 'Backend' },
{ name: 'Phoenix', category: 'Backend' }
]
}
}
}).$mount('#app')
When working with the multiselect component that uses groups, I encountered an issue where deselecting pre-selected options within a group did not function as expected. There also seemed to be an issue when manually deselecting one option and then reselecting the entire group.
To reproduce this behavior in the fiddle:
1) Upon initial load, "Laravel" and "Phoenix" are selected.
2) Click on the multiselect and choose "Other" to attempt to deselect the group. Notice that nothing happens.
3) Try deselecting the "Phoenix" option and then click the "Other" group. You will observe that the options now show "Laravel", "Phoenix", and "Laravel".
I am uncertain whether I am implementing something incorrectly or if this behavior indicates a bug. If it is indeed a bug, I will proceed by reporting it in their issues section.