close-on-select does not work with group-select

[SloppyFresh]

Reproduction Link

https://jsfiddle.net/wbeuyqv8/

Steps to reproduce

Create a multiselect with both group-select and close-on-select set to true. When a normal option is selected, the control closes itself. However, when the group options are selected, the control does not close itself.

Expected behaviour

When a group option is selected, the control should close itself.

Actual behaviour

When a group option is selected, the control does not close itself.

[jonascarlbaum]

Is there any workaround on this?

Like listen on @input and calling something on the component by ref or something?

[jonascarlbaum]

@shentao is my thought in previous comment achievable to do?

I can't find any documentation on how to call something on component to close select or something, but I guess that if it exists it would be ok for now, until a boolean property for close-on-group-select is created, or close-on-select can take values such as true/false/item/group/all/group-and-item (just brainstorming).

[jonascarlbaum]

@shentao I did a PULL request, with proposed solution.

#1206

I guess that would be the best solution, it's quick and respects the closeOnSelect-property and if you feel you can make fine-grained properties later on, but that's probably bigger effort. ;)

[001123]

It still happens, is any solution for this?

[Aterr]

Same here. Select is not closed after group was selected.

[jonascarlbaum]

Well, my pull-request is accepted, should work, but NPM package isn’t updated. Maybe @shentao can do that when he finds time for it!? 😉

[jonascarlbaum]

@Aterr and @001123 — since the npm-package isn’t updated, it doesn’t matter my pull-request is accepted and is in the code base… So we have to rely on @shentao doing a npm-release — then we can update our npm-package references to use the new release and it will behave as we desire in our projects… 👌👍

[jonascarlbaum]

…or maybe change reference to shentao/vue-multiselect#master, if I understand it correctly it will use this github repo directly instead of latest released npm-package.

I haven’t tried that one though…

[damienrave]

Hi, for those among you awaiting a new release, I have found a quick fix : add a ref property on the multiselect and call the deactivate() function when the @select event is fired :

<multiselect ref="mySelect" @select="selected" />

export default {
    methods: {
        selected() {
            this.$refs.mySelect.deactivate();
        }
    }
}
</script>