turbo: Unable to manage history state programmatically (stream response)

Hey everyone, after I confirmed that data-turbo-action="advance" was not working properly in turbo-frames, I had opened an issue just for this. But now I’ve confirmed in the latest version of turbo rails this has been fixed! It may not address everyone’s needs from this thread. It’s still not yet programmatic management of history state. But it’s an important tool in the toolbox which now works. 😃

Details over on this issue: https://github.com/hotwired/turbo/issues/1156

OK. Doing this directly like this window.Turbo.navigator.history.replace({ href: url }); works fine.

@trsteel88 Potential solution: render turbo_streams from within a turbo-frame.

Example scenario: I have a clothes #index page and the user can apply various filters via select-inputs to find what they want (e.g. color, size, etc), but perhaps I also have a sidebar with various categories (e.g. shirts, pants, etc) and clicking on a category should retain any filters I already applied (i.e. If I was searching for medium size blue shirts, clicking on “Pants” in the sidebar should start me off looking at medium, blue, pants). Problem: my main filters and results are in a turbo frame together, whereas my sidebar is in a completely separate div, and will not be updated when the turbo frame updates on form submission.

If we set up our turbo-frame with data-turbo-action="advance" and also render a turbo stream within that frame, we can get the desired behavior:

<%= turbo_frame_tag :products, data: {turbo_action: :advance} do %>
  <%= turbo_stream.replace :sidebar do %>
    <% @categories.each do |category| %>
      <%= link_to category.name, products_path(filters: params[:filters]) %>
    <% end %>
  <% end %>

  <!-- pseudo-code -->
  <%= form_for :filters, method: :get, url: products_path do %>
    <select-input-that-sends params[filters][color]>
    <select-input-that-sends params[filters][size]>

    <%= submit_tag 'Filter' %>
  <% end %>

  <div>
    <!-- products HTML here -->
  </div>
<% end %>

This will:

1. Replace the :products turbo-frame with the response of the form submission (i.e. our newly filtered products)
2. Update the URL to contain the :filters parameters from our form submission
3. Update the sidebar via a turbo stream so that now all our sidebar links will contain our updated filter params

End result is that all our state is captured in the URL, the user does not lose their scroll position, and browser back/forward arrows worked as expected (including working with Turbo’s caching, so that you get instantaneous updates when navigating forward/back).

This works because turbo_streams run as soon as they are rendered on the page, so whenever our frame updates, boom, our stream runs as well.

@pySilver The request would look something like:

Started GET "/products?filters%5Bcategory_id%5D=1&filters%5Bcolor=blue&size=medium&commit=Filter
Processing by ProductsController#index as HTML

And the response would be our app/views/products/index.html.erb template, containing our :products turbo-frame (and the turbo-frame, in turn, contains the turbo_stream.replace call).

Let me know if that makes sense.

@pySilver Whoops, I made a mistake in my example. The sidebar links should include an appropriate data-turbo-frame attr look like this:

<!-- sidebar links should target our :products turbo-frame -->
<%= link_to category.name, products_path(filters: params[:filters]), data: {turbo_frame: :products} %>

The above link just hits our ProductsController#index as HTML (although, you could do a more complex controller/view set up where the response includes only the HTML needed for the frame, as opposed to the entire index view, which is what is happening in my example)

@trsteel88 in that case you would need to make the “state” part of the actual URL string. You can utilize URLSearchParams for this:

const url = window.location
const params = new URLSearchParams(url.search)

params.set("turbo_stream_history", true)
url.search = params

window.history.pushState({}, "", url);