vue-multiselect: Get an error after page redirecting

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.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 3
Comments: 16 (3 by maintainers)

Most upvoted comments

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(); },

maltegrosse on Oct 23, 2019

@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();
}

pututbawono on Mar 14, 2020

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

MrToxy on Nov 11, 2019

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!

fatihpense on May 12, 2019