Optionally capturing keyboard input in web app

[SanderMertens]

Hey! I just tried to embed a canvas inside a web app that has a few other widgets that need keyboard input, but noticed that all keyboard inputs are intercepted by the canvas, which I think is due to these lines:

    emscripten_set_keydown_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);
    emscripten_set_keyup_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);
    emscripten_set_keypress_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);

Is it possible to add an option that conditionally adds/removes these listeners on canvas focus/blur?

[floooh]

Can you test whether replacing those with _sapp.html5_canvas_selector does the right thing for you?

I don't remember why I treated key events special here, maybe because otherwise the arrow keys would scroll the page.

If you find a solution that works for you we can add a new config option to sapp_desc which controls the behaviour.

[SanderMertens]

I tried changing it to _sapp.html5_canvas_selector, but then the canvas doesn't receive keyboard events, not even when focused.

I'll give registering/unregistering listeners on focus/blur a go & let you know if it works.

[floooh]

The PR I just merged should allow full control over bubbling individual events now:

https://github.com/floooh/sokol/pull/975

Also see the changelog entry:

https://github.com/floooh/sokol/blob/master/CHANGELOG.md#27-jan-2024