[FEATURE REQUEST] Make cocooned_item support HTML table tag

[m3thom]

Hi, I really like this gem. I have used the nested_form and cocoon gems for a long time, and I found this gem suits me very well! Thank you for creating this amazing gem.

However, when I try to use cocooned_container and cocooned_item with an HTML table, it did not work out of the box.
Refer to https://github.com/notus-sh/cocooned?tab=readme-ov-file#2-signal-to-cocooned-it-should-handle-your-form
If I want to implement it using the table tag:

For cocooned_container

<% # `app/views/lists/_form.html.erb` %>
<%= form_for @list do |form| %>
  <%= form.input :name %>

  <h3>Items</h3>
  <%= cocooned_container do %>
    <table>

      <thead>
      <tr>
        <th>Description</th>
        <th>Done</th>
        <th>
          <%= cocooned_add_item_link "Add",
                                     form,
                                     :items,
                                     data: {
                                       association_insertion_node: "#table-with-items",
                                       association_insertion_method: "append",
                                     },
                                     partial: 'lists/item_fields'
          %>
        </th>
      </tr>
      </thead>

      <tbody id="table-with-items">
      <%= form.fields_for :items do |item_form| %>
        <%= render 'item_fields', f: item_form %>
      <% end %>
      </tbody>
    </table>
  <% end %>

  <%= form.submit "Save" %>
<% end %>

For cocooned_item

<% # `app/views/lists/_item_fields.html.erb` %>
<%= cocooned_item do %>
  <tr>
    <td><%= f.text_field :description %></td>
    <td><%= f.check_box :done %></td>
    <td><%= cocooned_remove_item_link "Remove", f %></td>
  </tr>
<% end %>

The problem here is when I try to click the Add link, the added item is not rendered properly because cocooned_item wraps the tr template with a div.

<div class="cocooned-item nested-fields" data-cocooned-item="true">
  <tr>template</tr>
</div>

But the tr tag does not allow wrapping with a div, so the item_fields are not added properly.

After a quick look into the code of cocooned_item, it only adds class="cocooned-item nested-fields" and data-cocooned-item="true" to the div.

So I tried to change my code:

<% # `app/views/lists/_item_fields.html.erb` %>
-<%= cocooned_item do %>
+  <tr class="cocooned-item nested-fields" data-cocooned-item="true">
    <td><%= f.text_field :description %></td>
    <td><%= f.check_box :done %></td>
    <td><%= cocooned_remove_item_link "Remove", f %></td>
  </tr>
-<% end %>

And it works! Items can be added or removed without any problem.

Is it possible to add an option to the cocooned_item method to specify a tag name of content_tag other than the default :div?

I don't know if doing so would break anything internally now or in the future.

Thank you in advance! 🚀

[gael-ian]

Hi @m3thom

I just pushed a new branch named cocooned-wrappers-with-optionnal-tag. You can have a look at PR #56 for details but, more important, can you try to install Cocooned from that branch in your app and tell me if it's a good answer to your problem?

If everything looks fine, I'll publish it in a new release (2.1.0).

[m3thom]

Hi @gael-ian

I try to install and play around with the change. It's works for me.

Thank you!

[gael-ian]

Great! I'll just wait a few days for answer on other open issues and will publish a new release. It should be before the end of week.

[gael-ian]

I can close these issue as changes to support requested feature have been merged (See #56) and will be release before the end of the day in Cocooned 2.1.0.