Turboframes not replacing when placed in another partial
I am trying to create a modal or a drawer which allows me to edit a form.
When I place the turbo_frame_tag
in the same file like so. The form shows up properly when I click the link.
admin/people/index.html.erb
<%= turbo_frame_tag 'drawer' %>
<div class="card">
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% for person in @people %>
<tr>
<td><%= person.name %></td>
<td>TBD</td>
<td><%= link_to 'Edit', '##' %></td>
</tr>
<% end %>
</tbody>
</table>
<%= link_to 'New Person', new_admin_person_path, class: 'btn', data: { turbo_frame: "drawer", action: 'click->modal#open' } %>
</div>
admin/people/_form.html.erb
<%= turbo_frame_tag "drawer" do %>
<%= simple_form_for [:admin, @person] do |f| %>
<%= f.input :first_name %>
<%= f.input :last_name %>
<%= f.submit 'Save', class: 'btn' %>
<% end %>
<% end %>
However when I place it in the drawer or in the modal partial. The form does not display.
admin/shared/_drawer.html.erb
<div class="admin__overlay" data-action="click->modal#close"></div>
<div class="admin__drawer">
<%= turbo_frame_tag "drawer" %>
</div>
The output of the HTML has the src url, the network request is made with no errors. But the turboframe is empty.
HTML Output
<turbo-frame id="drawer" reloadable="" src="http://localhost:3000/admin/people/new"></turbo-frame>
Any ideas here?
It looks like you need to replace the drawer code in your index.html.erb with something like
render "admin/shared/drawer"
and replace the contents of the drawer partial in your example with the drawer turbo frame code from your first code block.
This will place an empty drawer turbo-frame in your document, which will get populated with whatever you send it (in this case the new admin user form). I assume that it will also get assigned a CSS class to open/close via your Stimulus controller.