Keybinding Shortcut Fails After First Use

Panel
1

I’ve gotten keybindings to work with Panel (thanks again to @Hoxbro) but this simple case seems to have a bug. The code works fine to increment the clicks using the up arrow, until I add lines to disable/re-enable the button during the callback. The shortcut stops working after the first use.
I wonder if it’s possible to disable/re-enable in the javascript?

import panel as pn

pn.extension()

script = """
<script>
const doc = window.parent.document;
buttons = Array.from(doc.querySelectorAll('button[type=button]'));
const up_button = buttons.find(el => el.innerText === 'UP');
doc.addEventListener('keydown', function(e) {
    if (e.keyCode == 38) {
        up_button.click();
    }
});
</script>
"""

html = pn.pane.HTML(script)

button_up = pn.widgets.Button(name="UP")


def callback_up(event):
    ''' 
    up button & arrow callback
    -> key shortcut fails after first use when disabling the button
    '''
    button_up.disabled = True
    print('callback_up')
    button_up.disabled = False


button_up.on_click(callback_up)

pn.Column(
    pn.Column(button_up, button_up.param.clicks),
    html,
).servable()
2

I don’t think I will classify this as a bug as it is not officially supported, and the implementation is more of a hack than anything else. With that being said, by moving some of the script code around, I can get it to work.

const doc = window.parent.document;
doc.addEventListener('keydown', function(e) {
    buttons = Array.from(doc.querySelectorAll('button[type=button]'));
    const up_button = buttons.find(el => el.innerText === 'UP');
    if (e.keyCode == 38) {
        up_button.click();
    }
});
2 Likes