Delete button not clickable when content is different from text

[jfcalvo]

For some reason when rendering delete button with a content different from simple text it stop working.

Working example:

<%= dynamic_delete_button(class: "text-gray-400 hover:text-gray-700") do %>
  delete
<% end %>

Not working example:

<%= dynamic_delete_button(class: "text-gray-400 hover:text-gray-700") do %>
  <div>delete</div>
<% end %>

I found this because I was trying to rendering a icon inside the button and it stop working. Probably related with JS selectors in the code?

Didn't test but probably the same is happening with the add button. The same problem is happening to the add button too.

[jfcalvo]

A workaround that is working for me is adding pointer-events: none; CSS to the inner child like:

<%= dynamic_delete_button(class: "text-gray-400 hover:text-gray-700") do %>
  <div style="pointer-events: none">delete</div>
<% end %>

With this we are avoiding clicking events to happen on the child div and passing the event to the parent.

More info about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Maybe this is something that should be added to the documentation.