Retain turbo-frame functionality while using JS to stop click propagation?

Hey there. I’m working on an AlpineJs accordion component that has a link_to that is wrapped in a turbo-frame tag so when the link is clicked, it is replaced by an edit form that serves to seamessly edit the accordion label.

      <div x-data='<%="{expandedItem: #{} }"%>'
        <turbo-frame id="plan_pages_accordion_item">
          <% @plan_pages.each do |plan_page| %>
             <%= 'update_label', plan_page: plan_page %>
          <% end %>


<turbo-frame id="edit_plan_pages_label_<%= %>">
  <%= link_to plan_page.label,
              edit_plan_plan_page_path(plan_id:, id:, survey_page_id:,
              data: { turbo_action: 'replace', turbo_stream: '' } %>
  <span class="text-xs text-gray-400"> Click label to edit </span>

My controller action looks like this:

  def edit
    @plan_page = PlanPage.find(params[:id])

    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace("edit_plan_pages_label_#{}",
        partial: 'edit_label_form', locals: { plan_page: @plan_page })

Everything works, but clicking on the label (link_to) also triggers the accordion expand/collapse behaviour.

I’ve tried adding onClick event listeners to the div wrapping the link_to and using preventDefault and stopPropagation in an attempt to stop the click from activating the accordion behaviour, but none of these have worked:

  • event.preventDefault() prevents the request from being made so the link_to is never replaced by the edit form
  • event.stopPropagation() breaks the controller action that is expecting a turbo_stream request (it gets an HTML request instead).

Am I missing something here? Any thoughts on how could I make this work?