Alpine: $nextTick doesnt work properly

[piotrpog]

Here's codepen i created to illustrate the issue:

https://codepen.io/piotrpog/pen/dyoLwJO

I created list of images and initialized slider script swiper on it. So far so good. Then I swap these images and need re-initialize slider so it is displayed correctly.

I attached updating slider to button in codepen example. I used $nextTick, so slider updates only after now images are inserted. But id does not seems to work. I need to click button two times in order to make it work.

[SimoTod]

It's currently an existing bug (I think).
It's been mentioned in another tickets as well: https://github.com/alpinejs/alpine/issues/317

In the meantime, a possible workaround is to use a setTimeout (even a quick one like 100ms) instead of nextTick.

[HugoDF]

@SimoTod I think it's probably worth investing time into this one then 🙂
I'll have a look over the weekend or early next week, let me know if you find anything in the mean time

[SimoTod]

@HugoDF I'm going to be busy with work tomorrow so I won't have time until the weekend. I'll let you know if I spot anything.

[SimoTod]

@piotrpog I've tried your code pen and it seems to work okay for me.
The slider updates when I click the button the first time. Do you use a particular browser?

@HugoDF The issue on the other ticket seems to be related to transitions somehow.
If you remove all the transitions from the example, it works as expected.
I did forget but I met the same issue in a previous ticket (https://github.com/alpinejs/alpine/issues/170#issuecomment-589241184) and I think it's due to some of the animation stages being debounced so the nextTick stack is flushed before the object becomes visible.

[ryangjchandler]

@piotrpog I've tried your code pen and it seems to work okay for me.
The slider updates when I click the button the first time. Do you use a particular browser?

@HugoDF The issue on the other ticket seems to be related to transitions somehow.
If you remove all the transitions from the example, it works as expected.
I did forget but I met the same issue in a previous ticket (#170 (comment)) and I think it's due to some of the animation stages being debounced so the nextTick stack is flushed before the object becomes visible.

I came to the same conclusion when I ran into this the other day.

[piotrpog]

@SimoTod
After the first reload, slider does not work correctly - you can only move slider to two first slides, not third slide, which was added.
You can only swipe to the third slide after second reload.

By the way, using setTimeout workaround worked alright for me.

[ryangjchandler]

@SimoTod
After the first reload, slider does not work correctly - you can only move slider to two first slides, not third slide, which was added.
You can only swipe to the third slide after second reload.

By the way, using setTimeout workaround worked alright for me.

Which browser are you using?

[SimoTod]

oh yeah, you are right @piotrpog .
I didn't notice it the first time because I resized the window and the slider refreshed automatically.

I tried to add some console log and this is what happens:

• Alpine calls updateElements (ignoring the x-for element so. not updating the images yet)
• it empties the nextTick stack
• it calls updateElements or initialiseElements for each x-for element.

So at the end, when all the 4 elements are now in the DOM, nextTick has already been emptied when only the previous images where in the dom.
The second time works because it already has 4 images to begin with.

It seems an annoying bug to fix with the current implementation.

[SimoTod]

Not the nicest code ever but something like https://github.com/alpinejs/alpine/compare/master...SimoTod:bug/nexttick?expand=1
should fix it.
It breaks other test though, I think it conflicts with the other debounce calls since they all use the same variables.
I'll check again tomorrow to make sure it makes sense since I'm about to go to bed now. 😂

https://codepen.io/SimoTod/pen/JjdqawY

[SimoTod]

I've updated the code, it now passes tests and it works with the other example too: https://codepen.io/SimoTod/pen/rNVggyO

I had to duplicate part of the debounce function because I was under the impression that it was conflicting with the standard debouncing when I update a component but I might be wrong and we might be able to use the same function.

Feedback welcome.