How to stop event propagation from a TextInput to a Card header?

Panel
,
1

Hi, and thanks as always for the help.

My app needs an TextInput in the header of a Card, so users can type a title for that Card. However, I have a couple of issues with event propagation from that TextInput.

  1. When a user clicks inside the TextInput (because the user wants to type in it), the click will also cause the entire Card to collapse (or de-collapse).
  2. When a user types inside the TextInput, and happens to type a space, the entire Card will collapse (or de-collapse).

I do realise this is because the event is propagating from the TextInput to the parent Card. How do I fix this behavior?

Code below:

import panel as pn

pn.extension()

header_text = pn.widgets.TextInput(
    placeholder='describe your analysis here',
    disabled=False,
    max_length=255,
    width_policy='max',
    sizing_mode='stretch_width',
)

header_row = pn.Row(
    header_text,
    width_policy='max',
    sizing_mode='stretch_width',
)

card = pn.Card(
    "A line with some text",
    header=header_row,
    collapsed=False,
    collapsible=True,
    width_policy='max',
    sizing_mode='stretch_width',
)

card.servable()
2

An idea would be to set collapsible=False and have a separate toggle to toggle collapsed=True/False.

However, this does seem like undesirable behavior; can you submit an issue to Panel’s GitHub?

3

I worked around it by implementing a StaticText in the header and having an editable are elsewhere (which updates the header of course).

4

@ahuang11 An issue has been created at

How to stop event propagation from a TextInput to a Card header? · Issue #7045 · holoviz/panel (github.com)

Thank you