Challenge 1 / 1

In our video, we show how closing a bootstrap dialog before exiting a page, so that we can have a cleaned preview, doesn't quite work. When we came back to the page, we saw a greyed invalidation div covering it!

Fixing this required some more hacking to get it working properly.

Why did we get this weird behavior?

This happened because bootstrap has a bug where calling close on a modal sometimes doesn't close it properly.

This happened because Turbo has a bug where sometimes our code inside a turbo:before-cache event doesn't execute quickly enough.

This happened because we called close on our dialog and forgot to make the turbo:before-cache callback asynchronous.

This happened because we called close on our dialog right inside turbo:before-cache and the closing animation didn't have time to finish before the cache was saved.

Rewatch the video