Prefetch doesn't handle links with data-turbo-frame="_self" #1349
Description
<turbo-frame id="frame" target="_top">
<a data-turbo-frame="_self" href="/test">_self in frame</a> <!-- works -->
</turbo-frame>
<a data-turbo-frame="_self" href="/test">_self out of frame</a> <!-- doesn't work -->In both cases prefetch sends a turbo frame request with a header Turbo-Frame: _self. In a rails environment this will render turbo_rails/frame layout. When the link is in a frame, everything works. When the link is outside of the frame, the page does a full reload due to mismatching data-turbo-track elements in the head tag.
Code shows _self to be left out:
turbo/src/observers/link_prefetch_observer.js
Lines 108 to 119 in ea54ae5
Patch for a possible solution:
Turbo.session.linkPrefetchObserver.__proto__.prepareRequest = function(request) {
const link = request.target
request.headers["X-Sec-Purpose"] = "prefetch"
const turboFrame = link.closest("turbo-frame")
const turboFrameTarget = link.getAttribute("data-turbo-frame") || turboFrame?.getAttribute("target") || turboFrame?.id
if (turboFrameTarget && turboFrameTarget !== "_top") {
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
if (turboFrameTarget === "_self") {
if (turboFrame) {
request.headers["Turbo-Frame"] = turboFrame.id
}
return
}
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
request.headers["Turbo-Frame"] = turboFrameTarget
}
}