Do I have the correct understanding of promoting a Frame Navigation to a Page Visit, can't seem to get this to work as expected

1

Hi

I followed the Push history state from frame navigations PR (#398) and the related issues with interest.

What I’m hoping to be able to achieve is that as the user navigates inside a Turbo Frame, the browser location updates so that if the page is bookmarked or shared then the app will be able to restore the page state to how it was when bookmarked.

I haven’t been able to get this to work and was wondering if I’m doing something wrong or if I’m misunderstanding the intent behind this PR?

My current understanding is that a Turbo Frame with data-turbo-action="advance" added should behave the same as it would without that attribute, with the exception that clicking a link inside the Turbo Frame updates the browser location in addition to updating the frame source. Do I have that right or have I misunderstood?

What actually happens for me is that when clicking a link inside a Turbo Frame with data-turbo-action there is a brief moment where the contents of the frame is updated (and the rest of the page is unchanged), but then the whole page is replaced as if the link wasn’t in a Turbo Frame.

To illustrate this I scaffolded a minimal todo example in a newly created Rails 7.0.3.1 app (a task model with a title for each task). On the “task show” page I moved the title and the Edit link into a turbo frame so that now clicking to Edit the title replaces the contents of the frame with the edit form, and clicking Save shows the updated title, with all other contents on the page unchanged. i.e. the user experience is similar to editing the issue title on GitHub Issues.

Here’s the commit made to add the turbo frame without data-turbo-action - this works as described above.

And here’s the commit where I added data-turbo-action - now clicking on the Edit link results in the whole page being replaced rather than just the frame contents.

Can anyone see what I’m doing wrong? Or at least confirm for me that the intended behaviour for this is as I thought it was, in which case I can keep digging to see if I can figure this out.

Thanks!

Michael

2

Having now got to the bottom of this, I’m just following up on my own question in case anyone else runs into the same issue.

Promoting a Frame Navigation does behave the way I was expecting. The unexpected behaviour I was running into was caused by a Chrome extension that was interfering with the page.

Briefly, what was happening was:

  • The Chrome extension was inserting an element into every page, but this element was being inserted at an invalid location - as the first direct child of the html element, rather than making it a child of the body for example
  • As the document structure was now invalid, when Turbo attempted to parse the document and extract its head using new DOMParser().parseFromString this would result in an empty head element being returned
  • This then meant that the trackedElementSignature for a HeadSnapshot wasn’t generated correctly
  • This would cause trackedElementsAreIdentical to be false, resulting in the full page reload that I was experiencing

I’ve been in touch with the company who make this Chrome extension and they’ve actually released an updated version to correct this. However, I suspect there are other browser extensions out there which could interfere in a similar way.

Cheers

Michael