Clicking named anchor links in a Turbo Frame do not jump to the name unless you break out of the frame

[nickjj]

Hi,

I have a decently sized section of a page in a Turbo Frame and it's been a great experience, everything works perfectly. I also have data-turbo-action="advance" on the frame so all link clicks within that frame update the URL.

I recently wanted to create a link with an anchor point that jumps to the bottom of the page. Imagine something like having a blog post with a <a href="#comments">View comments</a> link near the top of the post and then down near the bottom of the post you'd have <a name="comments"></a>. In this case both sides of the link are in the same frame.

When you do this inside of a Turbo Frame, clicking the link does nothing. There's no URL update and you don't jump to the anchor's name. It's like the link click gets prevented.

However, if you change your anchored link to <a href="#comments" target="_top">View comments</a> then it all works as expected. You will jump to the bottom of the page and it doesn't perform any type of request. The URL gets updated and the back button works too.

I'm happy the above works and I don't mind doing this but I wonder if there's anything at the Turbo level where maybe this could be the default behavior? Something like if you're inside of a frame and you're linking to a named anchor then break out of the frame? Or perhaps this is a bug and it should do this without needing to break out of the frame? I'm not sure, that's why I'm posting it here.

[dhh]

Yeah, does seem like a special case we hadn't accounted for. Makes sense to me that pure anchor links break out of the frame. Feel free to investigate a PR for that.

[nickjj]

Any suggestions on where to start with that one?

I cloned this repo and poked around but didn't see any immediate spots in the code that says "you're in a frame and the link being clicked is a pure anchor link, in which case break out of the frame in the same way target="_top" would without having to programmatically modify the element to include that html attribute before the link visit action is invoked or depend on that attribute being defined by the user".

[manuelpuyol]

I think this issue extends to any anchor links. It looks like when frame-navigating to a anchored link, the frame will discard the anchor

[manuelpuyol]

Looks like this should be the culprit

turbo/src/core/frames/frame_controller.ts

Line 157 in 22fd88a

this.sourceURL = fetchResponse.response.url

fetchResponse.response.url removes the anchor from the request URL, so when we set the new sourceURL in promoted frames, Turbo is effectively discarding the anchor

[rbclark]

Just to add an additional note to this, using target="_top" or data-turbo="false" causes the anchor links to work, however it breaks the back button if the user clicks a link in the anchored frame and then navigates back. Nothing happens unless the user presses the back button twice. I've gone ahead and just handled the anchor functionality with a stimulus controller for now as a workaround.

[xrimpy]

https://www.stimulus-components.com/docs/stimulus-scroll-to)](https://www.stimulus-components.com/docs/stimulus-scroll-to

[redsun82]

👋 I think #1507 should address part of the problem here. I think another point is skipping a reload altogether for pure # links.

[redsun82]

and #1508 should address the rest 🙂