`data-turbo-permanent` not working as expected (or maybe at all)?

1

I’m using data-turbo-action = "advance" in an app with a sidebar → detail layout, so that the URL updates to something real as users traverse objects. In my sidebar, I’m doing various things that I’d like to persist—like adding a class to selected rows and writing data attributes.

I’ve marked the parent sidebar element as data-turbo-permanent, but the entire page gets torn down and repainted with every click. New data loads into the detail frame (which is good), but the ‘dirty’ state of the sidebar is lost. What am I missing? Am I misunderstanding what data-turbo-permanent is for?

I’m calling it like so:

<sidebar id="object-sidebar" class="inset-2-columns__sidebar" data-turbo-permanent>
  <%= render "objects" %>
</sidebar>
1 Like
2

data-turbo-permanent applies for cache restoration visits, not standard navigation visits.

3

FYI, to persist the element for future loads, you could do something like:

// data-turbo-persist
// copy elements from current document to new before rendering
function persistElements(newDocument) {
  const isPreview = document.documentElement.hasAttribute('data-turbo-permanent');
  if (isPreview) return;

  const persistElements = document.querySelectorAll('[id][data-turbo-permanent]');
  persistElements.forEach((persistElement) => {
    const { id } = persistElement;
    const newPersistElement = newDocument.querySelector(`#${id}[data-turbo-permanent]`);
    if (newPersistElement) {
      newPersistElement.outerHTML = persistElement.outerHTML;
    }
  });
}

or use a different attribute (e.g. data-turbo-persist):

// data-turbo-persist
// copy elements from current document to new before rendering
function persistElements(newDocument) {
  const isPreview = document.documentElement.hasAttribute('data-turbo-preview');
  if (isPreview) return;

  const persistElements = document.querySelectorAll('[id][data-turbo-persist]');
  persistElements.forEach((persistElement) => {
    const { id } = persistElement;
    const newPersistElement = newDocument.querySelector(`#${id}[data-turbo-persist]`);
    if (newPersistElement) {
      newPersistElement.outerHTML = persistElement.outerHTML;
    }
  });
}

<sidebar id="object-sidebar" ... data-turbo-permanent data-turbo-persist>
  <%= render "objects" %>
</sidebar>
4

Would you bind this to turbo::before-render?

5

It might be worth mentioning that data-turbo-permanent now works with both application and restoration visits (ie, both Back/Forward button and clicking links/submitting forms).

6

looks like it still doesnt

7

In my case i just forgot to add the id attribute to the element. Apparently it is required.

1 Like