Vue-multiselect: API: Programatic open & close

[adam-lynch]

We need to be able to programmatically open & close the dropdown. I can think of loads of use cases. Surprised it's not already supported (I guess it's because it's tricky with Vue?).

P.S. Is it technically impossible with the current implementation? I noticed that the caret slot gets passed a toggle prop. Could that be used to open & close programmatically?

[adam-lynch]

One way this could be done is via refs. So if your multiselect component had a method called close for example, we could call it as this.$refs.multiselect.close() if we add ref="multiselect" to the multiselect component.

Here's a Codepen to prove that parent to child communication works: https://codepen.io/adam-lynch/pen/GOooNB

[shentao]

This is probably the safest solution I would recommend. Passing events inside children is quite tricky. :)

[adam-lynch]

I'm suggesting here that this is actually added to the library. That open and close methods are added and documentation is added explaining how to use them. I could create a pull-request?

[miralize]

Was confused initially but activate and deactivate methods can be used like the follow in order to programatically open/close the dropdown.

this.$refs.multiselect.activate()

Maybe this could be added to the documentation for others in case they were curious as to how to achieve this too?

[shentao]

@miralize You’re welcome to create a PR to add it to the docs. :)

[nwaughachukwuma]

@shentao and @miralize is it possible to open the selection when the page loads or trigger it using an event on another element on the page. I have the multiselect hidden, and only show it when I click on a button, but then I want it to appear opened when it appears. Don't know if this is possible