Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue): slider not visible after resize & activation in KeepAlive #421

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

mathiasstamm
Copy link

@mathiasstamm mathiasstamm commented May 17, 2024

This PR fixes a small but obscure bug which occurs when the window is resized while a keen-slider is hidden BUT cached by vue's KeepAlive.

KeepAlive can be used when a component is being rendered dynamically (using <component />), but you want it to remain cached ("alive") while another component is being rendered. A component may not receive all updates and events while being hidden/cached.

Here's how the bug is reproduced:

  1. Dynamically render a keen-slider instance in a component which is being cached using KeepAlive.
  2. Dynamically render another component, hiding the original one holding the slider.
  3. Resize the window.
  4. Re-render the original (cached) component with the slider.

The slider is now effectively invisible, because all slides are translated to 0, 0, 0 with a width of 0.25px. This is likely because the slider wasn't being alerted of required events whilst hidden. As soon as the window is resized again, it fixes itself.

This does not happen if the window isn't resized before it's re-rendered.

Here's how the bug can be fixed (this PR):

Vue offers the onActivated and onDeactivated lifecycle hooks. They're called if a component gets hidden (deactivated) or shown (activated) in a KeepAlive component. Calling the slider's update() function in the onActiavted hook fixes the slider as soon as it appears, making it work flawlessly with KeepAlive.

onActivate is only called if the component is actually inside a KeepAlive.

This is actually my first real contribution to a public repository, I hope I'm doing this right :)

@mathiasstamm mathiasstamm marked this pull request as ready for review May 17, 2024 21:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant