Hello, I took a screen capture to show my problem.
I used Turbo to show inline editing and then click a navigational link and then click another navigational link back to the previous page. It shows the previous state with the inline editing and that quickly is replaced by the page refresh.
Is there a way to avoid this? Thank you.
My limited experience is that this can be fixed most of the time by making sure you undo the changes (programmatic changes or changes done by user interaction; both css and js) before you leave the page. This way, the preview will look identical to what’s going to be rendered after page load.
Sometimes, however, the only way is disabling the preview completely. This can be done with
<meta name="turbo-cache-control" content="no-preview">
…in the head element somewhere.
This is a last resort, but occasionally the best solution to the problem, depending on what your javascript and css is like.
Also, remember to test back button behaviour. Good luck!
Hey @leehericks!
@evenreven is spot on here. Looking at the screen cap you posted, you should just be able to close/reset your editing component and you’ll be golden.
If you’re using Stimulus, you can tie into the disconnect() lifecycle callback.
Otherwise, you can listen for Turbo’s turbo:before-cache event and use that to trigger the close/reset of your component.
Hope that helps!
Thank you to both of you. This seems like extra work, but I understand why it is as it is.