How to add a destroy button within a clickable row?

Question

I'm trying to make a list row that is clickable, but have a delete button inside of it.

When I click Delete, the confirmation alert shows up correctly, but then it just redirects to the page that the row is linked to, without deleting the record.

<li>
  <%= link_to project_path(@project) do %>
    ...truncated
    <%= @project.name %>
    ...truncated
    <%= button_to @project, method: :delete, data: { confirm: @confirm } do %>
      <%= 'Delete' %>
    <% end %>
  <% end %>
</li>

I have tried adding onclick: "event.stopPropagation();", which deletes the record, but now it doesn't show the confirmation dialog anymore.

Is it possible to do this without doing anything too custom outside UJS/turbo/hotwire?

Answer 1

Permitted content
Transparent, except that no descendant may be interactive content or an a element, and no descendant may have a specified tabindex attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary

---

I'm not sure how it will work with UJS, but I've always done it with a data attribute:

<table>
  <tbody>
    <% @items.each do |item| %>
      <tr data-clickable="<%= url_for item %>">
        <td>
          <%= item.name %>
        </td>
        <td>
          <%= button_to "delete", item, method: :delete, data: { turbo_confirm: "Sure?" } %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

// app/javascript/application.js

function navigateClickableElement(event) {
  const { target } = event;
  const element = target.closest("[data-clickable]");
  // don't navigate, if...
  if (!element)                         return; // not within data-clickable element
  if (window.getSelection().toString()) return; // there is text selected
  if (target.closest("a"))              return; // clicked a link
  if (target.closest("button"))         return; // clicked a button
  // good to go
  event.preventDefault();
  Turbo.visit(element.dataset.clickable);
}

document.addEventListener("click", navigateClickableElement);