Comments (25)
@tpaulshippy - I think you found the cause. Testing out @pjg github project, I saw it reproduced. The original page requesting includes several elements with data-turbo-track
, but the HTML from turbo-frame response has an empty <head>
. This is because the turbo-rails gem includes the following logic:
app/controllers/turbo/frames/frame_request.rb
# turbo-rails-2.0.5/app/controllers/turbo/frames/frame_request.rb
# The layout used is <tt>turbo_rails/frame.html.erb</tt>. If there's a need to customize this layout, an application can
# supply its own (such as <tt>app/views/layouts/turbo_rails/frame.html.erb</tt>) which will be used instead.
layout -> { "turbo_rails/frame" if turbo_frame_request? }
From the above comment you can replace the minimal app/views/layouts/turbo_rails/frame.html.erb with your own. Testing this out I addedapp/views/layouts/turbo_rails/frame.html.erb
to the project with tags that include data-turbo-track
(javascript_importmap_tags adds it). Note that I ignore title, meta and other tags that do not include data-turbo-track
.
<html>
<head>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
After doing this workaround, turbo-frame Restoration Visits (back) work as expected.
I don't see this as the "solution", just a temporary workaround until the actual problem is fixed.
from turbo.
I've run into this as well. A simple html page with turbo_frame and a link can trigger this.
Controller action index
and corresponding index.html.erb:
<%= turbo_frame_tag 'page' do %>
<%= render 'users', users: @users %>
<p>
<%= link_to_prev_page @users, '< Previous Page', data: { turbo_frame: 'page', turbo_action: 'advance' } %>
<%= link_to_next_page @users, 'Next Page >', data: { turbo_frame: 'page', turbo_action: 'advance' } %>
</p>
<% end %>
(prev/next links are from kaminari).
Loading index, clicking "Next", then Browser's back button triggers this issue. The page content is not being refreshed.
from turbo.
I've created a minimal reproducible testcase. I'm using Rails. Here's the repo: https://github.com/pjg/turbo-frame-bug
Steps to reproduce:
bundle install
bin/rails server
Navigate to http://localhost:3000
Click "Next page".
Click Back browser button.
On my end (MacOS; Chrome, Safari, Firefox) when I click Back page content doesn't refresh. It stays the same, while it should display the previous page.
NOTE: It starts working again if I click Next Page/Previous Page a couple of times.
from turbo.
Yep. That's the issue. Well, the issue is in Turbo but yeah that's why you can't workaround the issue easily.
from turbo.
I also ran into this just today, can confirm @tleish's workaround fixes it.
from turbo.
I'm experiencing the same issue, after the upgrade, a link inside a turbo frame is updating the URL correctly but when I use the back button, it only shows the current snapshot.
The weird part is that its only for the first link inside the turbo frame, if I click on another link afterwards, the history and the snapshots seem to work as expected
from turbo.
I tried reproducing and could not. Is there a simple code example that reproduces this?
from turbo.
I tried reproducing and could not. Is there a simple code example that reproduces this?
Hi @tleish! Sorry for the delay. I should have time this weekend to make a simple app to demo the issue.
from turbo.
I just tested again and like @pjg, when I use:
Turbo.visit(url.toString(), {frame: 'search-results', action: 'advance'});
The URL is updated but when I hit the back button, I don't see the previous page. it only happens with the initial call, if I use Turbo.visit
a second time and hit the back button, it works as expected.
from turbo.
Ok, I was able to reproduce this by moving the links outside the turbo-frame, where it did work where links were within the turbo-frame.
from turbo.
I am not able reproduce this, even by moving the links outside the frame. I was looking primarily at this page after running npm start
Does this only happen in rails? Do the URLs have to have query strings? Trying to figure out how you break this.
from turbo.
Tried my local test again. Realized it had nothing to do with links inside or outside the turbo-frame
, but rather IF the content inside the turbo-frame had any HTML, which I don't necessarily think is a bug.
For example:
<turbo-frame id="results">
Does not cache and show on Restoration Visit
</turbo-frame>
<turbo-frame id="results">
<div>Caches and shows on Restoration Visit</div>
</turbo-frame>
So, I'm still unable to reproduce the original issue.
from turbo.
Interesting. That sounds like a different bug. I wonder why the HTML tags affect the behavior.
from turbo.
I'm not able to reproduce that issue either @tleish
Got it. If the original frame content has just plain text, the back button will not restore it. Weird. Are you going to open another issue for that one? @tleish
from turbo.
I'm not sure the turbo-frame with text only not rendering on restoration visits is a bug. I believe turbo uses cloneNode to cache html. If the frame has no nodes to cache (text only), then it doesn't cache it.
from turbo.
FYI, one (failed) attempt to reproduce the issue:
https://github.com/tleish/turbo-frame-history
Perhaps others can use this as a starting point to reproduce the issue.
from turbo.
Note: I tested this on MacOS Chrome, Firefox and Safari. Perhaps it's a specific OS and/or browser?
from turbo.
Here's a more minimal way to reproduce (outside of rails):
- Create a folder.
- Drop the turbo.es2017-umd.js file into it.
- Create the following two html files:
firstpage.html
<!DOCTYPE html>
<html>
<head>
<title>Frame advance bug</title>
<script data-turbo-track="reload">
</script>
<script src="turbo.es2017-umd.js"></script>
</head>
<body>
<h1>My Page</h1>
<turbo-frame id="page">
<p>First page</p>
</turbo-frame>
<p>
<a
data-turbo-frame="page"
data-turbo-action="advance"
href="/nextpage.html"
>Next page</a
>
</p>
</body>
</html>
nextpage.html
<turbo-frame id="page">
<p>Next page</p>
</turbo-frame>
The issue seems to be the presence of the data-turbo-track="reload"
attribute on any valid tag in the HEAD. If you remove that attribute, the issue goes away. But if you put it on any tag (I tried it on <title>
, <meta>
, and <script>
), you see the issue.
from turbo.
The issue seems to be the presence of the data-turbo-track="reload" attribute on any valid tag in the HEAD. If you remove that attribute, the issue goes away.
I do not find it to be true. In my regular app I'm running with data-turbo-track: ''
(empty string). If I remove data-turbo-track
from my minimal Rails example app, I can still reproduce the issue.
from turbo.
Have you viewed source on the page and confirmed that there is no data-turbo-track="reload" anywhere in your HEAD? I ask because I'm not sure it's easily removed from a boilerplate rails app.
from turbo.
You're right. Rails adds data-turbo-track: "reload"
for importmaps.
The source is here: https://github.com/rails/importmap-rails/blob/0a6330133b75a72d7c5d07fe87c2fce50d76b997/app/helpers/importmap/importmap_tags_helper.rb#L15 -- I don't think it can be "turned off".
from turbo.
Will this also make sure to trigger a reload of the page if there has been a new deploy and the asset files has changed? If so, it maybe a smart thing to do anyway?
from turbo.
Yes @jonh-favo
Looks like this issue started to break here: ed72ba1
It doesn't seem like the frame should be required to have all the same tags (with turbo-track=reload) in head as the hosting page for the back button to work. But that seems to be what's happening.
from turbo.
I discovered that I also need to add all meta tags that configures turbo in that turbo_rails/frame.html.erb layout, and I needed to add csrf_meta_tag. Otherwise all requests made by turbo afterwards were missing the the x-csrf-token header and reverted to default turbo behavior.
For instance I've disabled the prefetch functionality in the application.html.erb layout, but after a single turbo request that updated a frame it was suddenly enabled again.
from turbo.
Just noting this for @tleish, primarily in case it's relevant to the fix in the merged PR:
I discovered that the above workaround breaks pages that try to force reload a new page via <% turbo_page_requires_reload %>
or <meta "turbo-visit-control", content: "reload"</meta>
.
It looks like adding <%= yield :head %>
to the workaround fixes it, but I don't know turbo well enough to be confindent:
<html>
<head>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", "custom", "actiontext", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= yield :head %>
</head>
<body>
<%= yield %>
</body>
</html>
from turbo.
Related Issues (20)
- Script tags are reexecuted when navigating back from a page with an error status code using browser's back button HOT 1
- Eager-loaded frame fetches but does not render its src HOT 1
- Server-side redirect from turbo stream to file download fails in Turbo 8
- Firefox issue with `scroll-behavior: smooth` and Turbo enabled (v8.0.4) HOT 3
- The documentation does not mention that Stream Action tags can be rendered inside any HTML HOT 5
- using data-turbo-action "replace" or "advance" cause turbo:before-cache event to be called on live page HOT 1
- Occasional disconnect, no documented way to monitor or reconnect HOT 5
- Incorrect page content when a Turbo "replace" stream action is followed by a refresh
- turbo-confirm doesn't work on links without a turbo-method HOT 1
- Window.fetch has been overwritten by Stimulus HOT 5
- Adding stimulus breaks a test...why?
- Indefinite Progress Bar on Turbo.visit with turbo-stream content HOT 5
- Preserve scroll position when morphing turbo frames
- turbo:morph-element fires twice
- Form not displaying errors on page HOT 2
- Morph with infinite scroll
- turbo-frame with text only not rendering on restoration visits
- How to prevent element from being removed during morph? HOT 3
- data-turbo="false" misbehaviour
- Drive: Navigating back from a 3xx redirect to an external page makes turbo show 'loading' forever
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbo.