search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Vue component is destroyed when <keep-alive> is used #164

Closed akki-jat closed 5 years ago

akki-jat commented 5 years ago

Hey @karol-f, When custom element is used in keep-alive then it should not be destroyed but it is getting destroyed and it is causing some wired behaviors (one of them I know is vue $refs are undefined)

Reproduction Link

https://codesandbox.io/s/9y22wqv64

Steps to follow to reproduce the bug

  1. Open console first
  2. Click on Hello radio button (will open Hello Component)
  3. Wait for 3 for more seconds
  4. Now click on custom component radio button (will open custom component created with this awesome library)
  5. Now click on input & move your eyes to console to look the error

Here is the GIF to better understand the bug

vue-custom-element-issue

karol-f commented 5 years ago

Hi, quick thought - change in options timeout to some bigger number https://github.com/karol-f/vue-custom-element/blob/master/README.md#options - destroyTimeout. This should help.

Please let me know if it solves Your problem.

akki-jat commented 5 years ago

@karol-f it is not proper solution even if it works, because in real application what number in delayTimeout should I give is uncertain it depends on the user when he wants to come to this component.

What do you say?

karol-f commented 5 years ago

You are right. Will look at it.

akki-jat commented 5 years ago

@karol-f just opened pull request with quick solution. Take a look.

karol-f commented 5 years ago

https://github.com/karol-f/vue-custom-element/pull/165 PR is merged - a couple tweaks added:

Just pass null as destroyTimeout value and it will work.

Thanks!