I have a <turbo-frame id="modal"> tag in my rails layout outside of the <%= yield %> and when I try to render content in the turbo-frame from within the yield it does not render the HTML inside the turbo-frame. The src attribute updates to <turbo-frame id="modal" src="https://my-url"> and there are no errors on the page or server.
If I move the <turbo-frame id="modal"> inside the yielded content, then it will render the HTML inside the turbo-frame as expected but this is a global element I want on the layout.
I am using Turbo 8.
app/views/posts/edit.html.erb
<%= turbo_frame_tag "modal" do %>
Render edit form ...
<% end %>
app/views/posts/show.html.erb
<%= link_to 'edit', edit_post_path(post), data: {turbo_frame: 'modal' } %>
app/views/layouts/application.html.erb
<body>
<%= turbo_frame_tag "modal" %>
<%= yield %>
<body>
Is this the expected behavior? If not, what am I doing wrong?
I'm gonna guess you've explicitly set layout in your controller, just remove this:
layout "application"
You have <turbo-frame id="modal"></turbo-frame> in your layout, when you navigate the edit link you end up rendering two turbo frames with the same id. Only the first turbo frame is used to update the page. It is empty so you get no updates:
<body>
<turbo-frame id="modal"></turbo-frame>
<turbo-frame id="modal">
Render edit form ...
</turbo-frame>
</body>
When you're setting layout you're overriding turbo frame layout, which is normally rendered for turbo frame requests. It's an empty layout, for performance. That means you'd render only one turbo frame and everything would work.
If you need to override layout do this:
layout -> {
if turbo_frame_request?
"turbo_rails/frame"
else
"other_layout"
end
}
https://github.com/hotwired/turbo-rails/tree/v2.0.5#a-note-on-custom-layouts