Avoid that clicks on links or button in a collapsible section trigger the collapse mechanism

Author: HDinger

.changeset/orange-insects-rest.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Links in collapsible areas do not trigger collapse any more

app/components/primer/open_project/collapsible.ts

@@ -16,7 +16,8 @@ export abstract class CollapsibleElement extends HTMLElement {
     }
   }
 
-  toggle() {
+  toggle(event?: MouseEvent) {
+    if (event && (event.target as Element).closest('a, button')) return
     this.collapsed = !this.collapsed
   }
 

previews/primer/open_project/collapsible_section_preview.rb

@@ -52,6 +52,15 @@ def collapsed
           locals: { }
         )
       end
+
+      # @label With link in title
+      # @hidden
+      def with_link_in_title
+        render_with_template(
+          template: "primer/open_project/collapsible_section_preview/with_link_in_title",
+          locals: { }
+        )
+      end
     end
   end
 end

previews/primer/open_project/collapsible_section_preview/with_link_in_title.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
+  <% section.with_title { render(Primer::Beta::Link.new(href: "#")) { "Feedback" } } %>
+  <% section.with_collapsible_content do %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
+  <% end %>
+<% end %>

test/system/open_project/collapsible_section_test.rb

@@ -64,4 +64,23 @@ def test_click_behaviour
     assert_equal "true", trigger[:'aria-expanded']
     assert_selector("##{controlled_id}", visible: true)
   end
+
+  def test_link_in_title_does_not_collapse
+    visit_preview(:with_link_in_title)
+
+    assert_no_selector(".CollapsibleSection--collapsed")
+
+    # Clicking the trigger area (not the link) should still collapse
+    trigger = find(".CollapsibleSection--triggerArea")
+    trigger.click
+    assert_selector(".CollapsibleSection--collapsed")
+
+    # Expand again
+    trigger.click
+    assert_no_selector(".CollapsibleSection--collapsed")
+
+    # Clicking the link should NOT collapse the section
+    find(".CollapsibleSection--triggerArea a").click
+    assert_no_selector(".CollapsibleSection--collapsed")
+  end
 end