Vue-multiselect: Get an error after page redirecting

[chocochaii]

I get an error Cannot read property 'blur' of undefined after the page changed. This occurred randomly but as I noticed, it happens when redirecting from page that contains searchable multiselect to others only.

For example, my homepage has searchable multiselect, I go to another page by clicking on the link on my page, 4-5 seconds after that the error displayed.

I took a look into the error and found that the deactivate() in multiselectMixins.js was called.

It's understandable that the multiselect should be deactivated before redirecting but I have no idea why the error displayed after the page changed.

[shentao]

Thanks for noticing this!

[csicky]

Hi, I have the same error.
I did not check the code, but I think what is missing is that the @blur event is not removed on beforeDestroy.

[chocochaii]

I've found the root cause. For me, if the multiselect is focused and the page is redirected by vue-router, the error will occur. If I click somewhere to blur the multiselect before page redirected, the error won't show.

[shentao]

@csicky all events registered on the component are removed automatically when the component unmounts.

[csicky]

I was using multiselect in an AgGrid cell and it was destroyed brutally by AgGrid, never having the chance to call beforeDestroy. At the time I wrote the comment I didn't know that AgGrid destroys inner components so brutally when switching a custom cell from view to edit mode.

Thank you for such a useful and versatile component, we are relying on it heavily in our project!

[shentao]

Whoa. I wonder what they use to do that. This might be a really bad practice since not being allowed to properly unmount the component might lead to memory leaks. 😞

I’m happy to hear that! I hope the support I can provide will be better once v3 ships :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fatihpense]

This seems like a workaround. However, I'm not sure about the implications.

Give a reference to the multiselect component:

<multiselect
    ref="myMultiSelect" ...

In the getValue function call deactivate method of multiselect component:

getValue() {
    this.$refs.myMultiSelect.deactivate();
    ...

Thank you for the component by the way!

[maltegrosse]

I got the same issue by having multiselect in a modal. If the multiselect is focused, and the modal closed by keypress (esc), the blur error occurs.
workaround as fatihpense mentioned:
ref the multiselect, but i place the deactivate() function in
beforeDestroy(){ this.$refs.myMultiSelect.deactivate(); },

[MrToxy]

error still persists, this should be handled on beforeDestroy on the component itself, and maybe even use a try catch

[rasgo-cc]

Also getting the same error.

[mydnic]

@shentao could you please reopen this issue ?
I have the same error when I have forms in a modal

[pututbawono]

@mydnic
I also got the same problem, and it occured when the closing the modal while the multiselect is opened.
The solution is actually the same as before, by using ref on the multiselect, and then call the deactivate function on modal close, similar to this :

closeModal() {
   this.show = false;
   this.$refs.myMultiselect.deactivate();
}

[ukhmzn]

@pututbawono
I have the same problem too, and it also occure when I try to close modal while the multiselect is opened. But in my case using ref on the multiselect not working because page's component and modal's component are not nesting.

[arsenasatryan]

The same problem. are there any updates on this?