How to append a form element to the dom?

1

I’m using rails 7 with tailwind

I have a form that I want users to be able to append select inputs to, so I’ve set up the form to use a turbo stream. It is almost working, but I’m seeing some odd, unexpected behavior.

When the turbo stream responds the network shows the correct html, but what’s actually mounted to the dom includes

type="hidden" and style="display: none;" to the html.

The partial I want to render:

<select name="job[employee_ids]" id="job_employee_ids">
  <option value="">Please select</option>
  <% employees.each do |e| %>
    <option value="<%=e.id%>"><%= e.first_and_last_name %></option>
  <% end %>
</select>

but the html being mounted

<form method="post" action="http://localhost:3000/append_employee" target="" style="display: none;"><input name="_method" value="get" type="hidden"><input name="authenticity_token" value="-R0L0z4JejbgHnvcQFtEmgvG4gSm29MOKuvko1YkkToXIIfEKAmMoN3Lb9Jykd_E4SaCIwq7Gu0TzAcyRf0-wA" type="hidden"><input type="submit"></form>

What’s odd is the stream works properly, but only on the first request. Subsequent calls exhibit the hidden behavior, and the hidden elements are mounting to the dom outside of the target div.

Very confusing. Here’s the behavior:

2

the network shows the correct html

Can you share the full HTML response from the network?