SDL2 Keyboard events stop working when unfocusing embedded game on itch.io

[Volian0]

Please include the following in your bug report:

Description of the issue: When I upload my emscripten game to itch.io and then start it, the keyboard works fine, but as soon as I unfocus the game, the keyboard events stop working, even when clicking on the canvas. Clicking on other part of the embedded page makes keyboard events work again, but clicking on the canvas does NOT work and my index.html only contains the canvas, so it's impossible to get the keyboard events working again. Clicking the itch.io's fullscreen button also makes keyboard events stop working.

How to reproduce:

• Create a project with SDL2 that uses keyboard events
• Compile it with emscripten
• Publish the game to itch.io
• Go to the page of the game, start it, click on the comment section and then back on the game
• The keyboard events should stop functioning!

My workaround: I managed to fix the issue by writing following javascript code to make sure the canvas is focused when clicked and when entering fullscreen:

            window.addEventListener("resize",function(){
                Module.canvas.focus();
      });

                    canvas.onclick = function() {
    Module.canvas.focus(); };

but it feels kind of hacky and I was wondering if I'm doing something wrong.

Version of emscripten/emsdk:

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.48-git (e967e20b4727956a30592165a3c1cde5c67fa0a8)
clang version 18.0.0 (/srcdest/llvm-project a54545ba6514802178cf7cf1c1dd9f7efbf3cde7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /opt/emscripten-llvm/bin

Full link command and output with -v appended:

make: make
[ 50%] Building CXX object CMakeFiles/chess.dir/src/main.cpp.o
 /opt/emscripten-llvm/bin/clang --version
 "/opt/emscripten-llvm/bin/clang++" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -DEMSCRIPTEN --sysroot=/home/volian/.emscripten_cache/sysroot -Xclang -iwithsysroot/include/fakesdl -Xclang -iwithsysroot/include/compat -I/home/volian/.emscripten_cache/sysroot/include/SDL2 -I/usr/include/SDL2 -I/usr/include/libpng16 -I/usr/include/webp -I/usr/include/glm -std=gnu++20 -v -O3 -MD -MT CMakeFiles/chess.dir/src/main.cpp.o -MF CMakeFiles/chess.dir/src/main.cpp.o.d -c /home/volian/chess/src/main.cpp -o CMakeFiles/chess.dir/src/main.cpp.o
clang version 18.0.0 (/srcdest/llvm-project a54545ba6514802178cf7cf1c1dd9f7efbf3cde7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /opt/emscripten-llvm/bin
 (in-process)
 "/opt/emscripten-llvm/bin/clang-18" -cc1 -triple wasm32-unknown-emscripten -emit-obj -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name main.cpp -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -debugger-tuning=gdb -fdebug-compilation-dir=/home/volian/chess/gowienko_release -v -fcoverage-compilation-dir=/home/volian/chess/gowienko_release -resource-dir /opt/emscripten-llvm/lib/clang/18 -dependency-file CMakeFiles/chess.dir/src/main.cpp.o.d -MT CMakeFiles/chess.dir/src/main.cpp.o -sys-header-deps -canonical-system-headers -D EMSCRIPTEN -I /home/volian/.emscripten_cache/sysroot/include/SDL2 -I /usr/include/SDL2 -I /usr/include/libpng16 -I /usr/include/webp -I /usr/include/glm -isysroot /home/volian/.emscripten_cache/sysroot -internal-isystem /home/volian/.emscripten_cache/sysroot/include/wasm32-emscripten/c++/v1 -internal-isystem /home/volian/.emscripten_cache/sysroot/include/c++/v1 -internal-isystem /opt/emscripten-llvm/lib/clang/18/include -internal-isystem /home/volian/.emscripten_cache/sysroot/include/wasm32-emscripten -internal-isystem /home/volian/.emscripten_cache/sysroot/include -O3 -std=gnu++20 -fdeprecated-macro -ferror-limit 19 -fvisibility=default -fgnuc-version=4.2.1 -fno-implicit-modules -fcxx-exceptions -fignore-exceptions -fexceptions -fcolor-diagnostics -vectorize-loops -vectorize-slp -iwithsysroot/include/fakesdl -iwithsysroot/include/compat -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o CMakeFiles/chess.dir/src/main.cpp.o -x c++ /home/volian/chess/src/main.cpp
clang -cc1 version 18.0.0 based upon LLVM 18.0.0git default target x86_64-unknown-linux-gnu
ignoring nonexistent directory "/home/volian/.emscripten_cache/sysroot/include/wasm32-emscripten/c++/v1"
ignoring nonexistent directory "/home/volian/.emscripten_cache/sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 /home/volian/.emscripten_cache/sysroot/include/SDL2
 /usr/include/SDL2
 /usr/include/libpng16
 /usr/include/webp
 /usr/include/glm
 /home/volian/.emscripten_cache/sysroot/include/fakesdl
 /home/volian/.emscripten_cache/sysroot/include/compat
 /home/volian/.emscripten_cache/sysroot/include/c++/v1
 /opt/emscripten-llvm/lib/clang/18/include
 /home/volian/.emscripten_cache/sysroot/include
End of search list.
[100%] Linking CXX executable chess.html
 /opt/emscripten-llvm/bin/clang --version
 /usr/lib/emscripten/tools/file_packager chess.data --from-emcc --preload res --use-preload-plugins
 /opt/emscripten-llvm/bin/wasm-ld -o chess.wasm CMakeFiles/chess.dir/src/main.cpp.o /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2_image.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2_image.a -L/home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2_mixer_ogg.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libSDL2.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libvorbis.a /home/volian/.emscripten_cache/sysroot/lib/wasm32-emscripten/libogg.a -lGL -lal -lhtml5 -lstubs -lnoexit -lc -ldlmalloc -lcompiler_rt -lc++-noexcept -lc++abi-noexcept -lsockets -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr /tmp/tmp1atvr60qlibemscripten_js_symbols.so --strip-debug --export-if-defined=main --export-if-defined=__start_em_asm --export-if-defined=__stop_em_asm --export-if-defined=__start_em_lib_deps --export-if-defined=__stop_em_lib_deps --export-if-defined=__start_em_js --export-if-defined=__stop_em_js --export-if-defined=__main_argc_argv --export=stackSave --export=stackRestore --export=stackAlloc --export=__errno_location --export=__get_temp_ret --export=__set_temp_ret --export=malloc --export=free --export=__wasm_call_ctors --export-table -z stack-size=65536 --initial-memory=16777216 --max-memory=16777216 --no-entry --table-base=1 --global-base=1024
 /opt/emscripten-llvm/bin/llvm-objcopy chess.wasm chess.wasm --remove-section=.debug* --remove-section=producers
 /usr/bin/wasm-emscripten-finalize --dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers chess.wasm -o chess.wasm --detect-features
 /usr/bin/node /usr/lib/emscripten/src/compiler.js /tmp/tmp75gwwjhh.json
 /usr/bin/wasm-opt --strip-target-features --post-emscripten -O3 --low-memory-unused --zero-filled-memory --pass-arg=directize-initial-contents-immutable chess.wasm -o chess.wasm --mvp-features --enable-mutable-globals --enable-sign-ext
 /usr/bin/node /usr/lib/emscripten/tools/acorn-optimizer.js /tmp/emscripten_temp_kw17086k/chess.js AJSDCE minifyWhitespace -o /tmp/emscripten_temp_kw17086k/chess.jso1.js
 /usr/bin/node /usr/lib/emscripten/tools/acorn-optimizer.js /tmp/emcc_acorn_info_s6cmyp7k.js emitDCEGraph noPrint
 /usr/bin/wasm-metadce --graph-file=/tmp/emcc_dce_graph_4xcu3vrs.json chess.wasm -o chess.wasm --mvp-features --enable-mutable-globals --enable-sign-ext
 /usr/bin/node /usr/lib/emscripten/tools/acorn-optimizer.js /tmp/emcc_acorn_info_i7bwitdl.js applyDCEGraphRemovals minifyWhitespace -o /tmp/emscripten_temp_kw17086k/chess.jso2.js
 /usr/bin/node /usr/lib/emscripten/tools/acorn-optimizer.js /tmp/emscripten_temp_kw17086k/chess.jso2.js AJSDCE minifyWhitespace -o /tmp/emscripten_temp_kw17086k/chess.jso3.js
 /usr/bin/wasm-opt --minify-imports-and-exports-and-modules chess.wasm -o chess.wasm --mvp-features --enable-mutable-globals --enable-sign-ext
 /usr/bin/node /usr/lib/emscripten/tools/acorn-optimizer.js /tmp/emcc_acorn_info_2prr5cbq.js applyImportAndExportNameChanges minifyWhitespace -o /tmp/emscripten_temp_kw17086k/chess.jso4.js
 /usr/bin/node /usr/lib/emscripten/tools/preprocessor.js /tmp/emscripten_temp_kw17086k/settings.js shell.html
 /usr/bin/node /usr/lib/emscripten/node_modules/.bin/html-minifier-terser chess.html -o chess.html --collapse-whitespace --collapse-inline-tag-whitespace --remove-comments --remove-tag-whitespace --sort-attributes --sort-class-name --decode-entities --collapse-boolean-attributes --remove-attribute-quotes --remove-redundant-attributes --remove-script-type-attributes --remove-style-link-type-attributes --use-short-doctype --minify-css true --minify-js true
[100%] Built target chess

[ericoporto]

@Volian0 do you still have this issue with latest Emscripten (3.1.55)?