fix(vue): slider not visible after resize & activation in KeepAlive #421
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
The slider is now effectively invisible, because all slides are translated to
0, 0, 0
with a width of0.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
andonDeactivated
lifecycle hooks. They're called if a component gets hidden (deactivated) or shown (activated) in a KeepAlive component. Calling the slider'supdate()
function in theonActiavted
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 :)