Do not propagate clicks on input elements in Card header (#7057)

* Do not propagate clicks on input elements in Card header

* Update card.ts

* Apply suggestions from code review

panel/models/card.ts

@@ -86,8 +86,7 @@ export class CardView extends ColumnView {
       this.button_el.style.backgroundColor = header_background != null ? header_background : ""
       header.el.style.backgroundColor = header_background != null ? header_background : ""
       this.button_el.appendChild(header.el)
-
-      this.button_el.onclick = () => this._toggle_button()
+      this.button_el.addEventListener("click", (e: MouseEvent) => this._toggle_button(e))
       header_el = this.button_el
     } else {
       header_el = DOM.create_element((header_tag as any), {class: header_css_classes})
@@ -120,7 +119,12 @@ export class CardView extends ColumnView {
     this.invalidate_layout()
   }
 
-  _toggle_button(): void {
+  _toggle_button(e: MouseEvent): void {
+    for (const path of e.composedPath()) {
+      if (path instanceof HTMLInputElement) {
+        return
+      }
+    }
     this.model.collapsed = !this.model.collapsed
   }
 

panel/tests/ui/layout/test_card.py

@@ -4,8 +4,8 @@
 
 from playwright.sync_api import expect
 
-from panel import Card
-from panel.tests.util import serve_component
+from panel import Card, Row
+from panel.tests.util import serve_component, wait_until
 from panel.widgets import FloatSlider, TextInput
 
 pytestmark = pytest.mark.ui
@@ -182,3 +182,22 @@ def test_card_scrollable(page):
     serve_component(page, card)
 
     expect(page.locator('.card')).to_have_class('bk-panel-models-layout-Card card scrollable-vertical')
+
+
+def test_card_widget_not_collapsed(page, card_components):
+    # Fixes https://github.com/holoviz/panel/issues/7045
+    w1, w2 = card_components
+    card = Card(w1, header=Row(w2))
+
+    serve_component(page, card)
+
+    text_input = page.locator('.bk-input[type="text"]')
+    expect(text_input).to_have_count(1)
+
+    text_input.click()
+
+    text_input.press("F")
+    text_input.press("Enter")
+
+    wait_until(lambda: w2.value == 'F', page)
+    assert not card.collapsed