From ca2a32c05d2c9df821f9bfe188f9cb7a48cc9ab6 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 2 Aug 2024 11:46:24 +0200 Subject: [PATCH 1/3] Do not propagate clicks on input elements in Card header --- panel/models/card.ts | 10 +++++++--- panel/tests/ui/layout/test_card.py | 23 +++++++++++++++++++++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/panel/models/card.ts b/panel/models/card.ts index 9ba534efa8..e33cc8eb86 100644 --- a/panel/models/card.ts +++ b/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 } diff --git a/panel/tests/ui/layout/test_card.py b/panel/tests/ui/layout/test_card.py index d46e1cebd2..caf481e729 100644 --- a/panel/tests/ui/layout/test_card.py +++ b/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 From b267a41bb55e0c1943105ed31cbf608dde85849f Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 2 Aug 2024 12:08:47 +0200 Subject: [PATCH 2/3] Update card.ts --- panel/models/card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/models/card.ts b/panel/models/card.ts index e33cc8eb86..6f72866511 100644 --- a/panel/models/card.ts +++ b/panel/models/card.ts @@ -122,7 +122,7 @@ export class CardView extends ColumnView { _toggle_button(e: MouseEvent): void { for (const path of e.composedPath()) { if (path instanceof HTMLInputElement ) { - return + return } } this.model.collapsed = !this.model.collapsed From af9fa5c8bf2bd336d881f4458081c0e4b6a0a6c5 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 2 Aug 2024 16:44:34 +0200 Subject: [PATCH 3/3] Apply suggestions from code review --- panel/models/card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/models/card.ts b/panel/models/card.ts index 6f72866511..01f4654912 100644 --- a/panel/models/card.ts +++ b/panel/models/card.ts @@ -121,7 +121,7 @@ export class CardView extends ColumnView { _toggle_button(e: MouseEvent): void { for (const path of e.composedPath()) { - if (path instanceof HTMLInputElement ) { + if (path instanceof HTMLInputElement) { return } }