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

1

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: #{@plan_pages.first.id} }"%>'
           data-accordion="collapse"
      >
        <turbo-frame id="plan_pages_accordion_item">
          <% @plan_pages.each do |plan_page| %>
            <div>
             <%= 'update_label', plan_page: plan_page %>
            </div>
          <% end %>
        </turbo-frame>
      </div>

update_label.html.erb

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

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_#{@plan_page.id}",
        partial: 'edit_label_form', locals: { plan_page: @plan_page })
      end
    end
  end

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?

1 Like
2

Remember how you fixed this ?