Picture a very common use-case described in the official Handbook: a <turbo-frame> that contains pagination links.

So, turbo supports (encourages?) annotating these pagination links with data-turbo-action="replace", and the resulting experience is very nice: browser URL gets updated, a page reload will load the correct pagination and the browser back button will show the last page loaded correcly.

However, as soon as you add data-turbo-action="replace" on any link, they start firing a turbo:load event on the page when clicked, even tough they are inside a <turbo-frame>; in my mind, turbo:load should be analogous to a DOMContentLoaded event, and it should fire only ONCE per page loaded; if a turbo frame is being navigated by pagination, I don't want my event handlers designed for the page that contains the turbo-frame to be fired again and again each time a frame within the page paginates.

Note that this ONLY happens if data-turbo-action is present; otherwise, the links inside the turbo-frame will not trigger a turbo:load on the page.

Lastly, the turbo:load event being fired is indistinguishable from the one on the first page load or from a full turbo visit outside the turbo-frame; it's target is the page's root html element, so I can't even detect it was a turbo:load coming from a turbo-frame.

So, how to avoid links clicked inside a <turbo-frame> that were marked with data-turbo-action="replace" to trigger turbo:load on the page, or at least distinguish these events from the sole turbo:load fired as soon as the page loads for the first time?

0

There are 0 best solutions below