Card Collapse/Expand triggered by Spacebar entry in a TextInput in Card Header

[emunsing]

Issue #7045 reported that a Card would collapse/expand when a TextInput was placed in the Card Header, and the user either clicked or pressed spacebar in this item. This was partially fixed by PR #7057 in a way which caught clicks from propagating, but did not catch spacebar entries in the textfield, which would still trigger collapse.

Based on my limited understanding, it seems that the default base HTMLTextInput object emulates click-like behavior when spacebar is pressed. I don't understand enough of the raw DOM behavior to understand why this isn't caught by the fix in #7057.

Software Version Info

panel                                   1.8.5.post1

Description of expected behavior and the observed behavior

Expected: A TextField in the Card Header can accept arbitrary text

Observed: Pressing spacebar in the TextField in a Card Header will toggle expand/collapse behavior. E.g. if a user types "a quick brown fox" in a Textfield in the Header of an expanded Card, the user will see the card collapse, expand, and collapse again (ending in collapsed state), without having clicked anywhere else.

Complete, minimal, self-contained example code that reproduces the issue

Updating test_card_widget_not_collapsed with the line text_input.press("Space") will cause the test to fail on the assert; the card will have collapsed. See below for a full version of the test with the new line, as of 1.8.5.post1

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("Space")  # This is the only newline
    text_input.press("Enter")

    wait_until(lambda: w2.value == 'F', page)
    assert not card.collapsed  # This will now fail

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

• I may be interested in making a pull request to address this

[AtharvaJaiswal005]

Hi, I'd like to work on this.

PR #7057 fixed click propagation from interactive widgets in Card headers, but spacebar keydown events still propagate to the Card's collapse toggle. I'll add a keydown event handler that prevents spacebar propagation when it originates from an input element inside the Card header.

I'll have a PR up shortly.