Workaround for ui.keyboard() not being called for Space and Arrow keys when elements are focused

[eulerleibniz]

So, I am starting this discussion because I had some trouble making a sort of a media players for timeseries and medical data. I needed some buttons for all typical actions you see in a media player (start, stop, forward, ...) and also wanted to have keyboard shortcuts for each of them.

Biggest problem was that Space and Arrow keys have inconsistent behavior when elements are focused. This is something that ui.keyboard(ignore=["some element type"]) does not address. This is caused by the fact that browsers have defined these keys for actions such as page navigation and switching element focus and so on. So here is the fix in case someone needs it:

from nicegui import ui
from nicegui.events import KeyEventArguments

# 1) Prevent default space & arrow behavior globally
# If you remove the following script, when you focus on an element and press Space or Arrow keys
# You will see the elements will be clicked or changed. This is unique to Space or Arrow keys
# In case of Buttons if you press Space they get clicked and then Space key is consumed and the keyboard event is not fired at all
ui.add_head_html(
    """
<script>
window.addEventListener('keydown', function(e) {
    const keys = [' ', 'ArrowUp','ArrowDown','ArrowLeft','ArrowRight'];
    if (keys.includes(e.key)) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        // re-emit so ui.keyboard() gets it
        window.dispatchEvent(new KeyboardEvent('keydown', { key: e.key, code: e.code, bubbles: true }));
    }
}, true);
</script>
"""
)


# 2) Catch *all* key events in Python
def handle_key(event: KeyEventArguments):
    # this runs on *any* keypress
    ui.notify(f"Key caught → code={event.key.code}, name={event.key.name}")


# IDK why I need ignore=["select"], but had to use it so it works
ui.keyboard(on_key=handle_key, ignore=["select"])

# 3) Two buttons to prove they no longer react to space/enter focus
ui.button("Button A", on_click=lambda: ui.notify("Button A Pressed"))
ui.button("Button B", on_click=lambda: ui.notify("Button B Pressed"))
ui.select(["1", "2", "3", "4"], value="1")
ui.slider(min=0, max=100, step=1, value=0)

ui.run()