Back button behavior in browser using hotwire/stimulus

rubyonrails-talk
1

Hello, Have a question about the back button in the browser. I have a chat app, where I can open conversations with different users. If I select a different conversation with user A, then with user B, then clicking on “back” and I’m redirected to A. Which is all correct. Conversation btw inside turbo frame.

But now I added a button that allows users to edit Notes (inside turbo_frame)

draft code:

<div class="flex flex-row items-baseline gap-2">
  <span class="text-xs text-gray-500 truncate">
    <%= truncate note.content, length: 60 %>
  </span>

  <%= button_to edit_notes_path,
                method: :get,
                turbo_method: :get,
                params: { user_id: note.target_user_id },
                data: { turbo_stream: true }, class: "btn btn-xs btn-ghost" do %>
    <%= icon "pencil", variant: "outline", class: "w-3 h-3" %>
  <% end %>
</div>

And now, after I submit notes on page “B” after visiting “A”, when I click back, I see that URL in the browser changed to conversation=A, but I see content from B.

It makes me crazy :slight_smile:

A possible solution is to handle the “edit notes” form using JS, but I’m not sure; maybe it will also not work.

2

Have a look at the difference between advance and replace here: https://turbo.hotwired.dev/reference/frames#:~:text=Frame%20that%20promotes%20navigations%20to%20Visits Maybe there’s something you can use when you update from the edit form to influence this. By overwriting the history, you will change what “back” means.

Walter

3

Can you add to the body of application.html.erb this attribute data-turbo="false"