emscripten-core / emscripten-core/emscripten

All pressed keys are released when any html element loses focus when using GLFW

Open
#14,590 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
C++
Stars
27.6k
Forks
3.6k
Avg merge
1d 1h
Merged PRs (30d)
105

Description

The GLFW adapter's OnBlur method cancels all pressed keys.
I think the OnBlur method is needed for handling the browser window/tab losing focus, but by subscribing to the blur event with the `window.addEventListener("blur", GLFW.onBlur, true)` method, the GLFW.onBlur will be called when any HTML element lose focus, not just the html body/window.
Normally this wouldn't be an issue, but when using virtual keys (html buttons invoking key presses; needed for mobile devices), then each different key press will be cancelled.

### Demo
https://szedenik-adam.github.io/Computer-Graphics-Homeworks-BME-2013/www/BlurBug/StorkGame.html

### Reproducing the bug
1. **Open the site** on a device which has physical keyboard (first read all instructions, because the first 3 steps needs to be completed in 10 seconds).
2. **Move the camera** (first left with **key "D"**, then right with **key "G"**), the camera moving should work correctly.
3. Use the top bar's buttons to move the camera.
3.1 **Press the "Camera left" button** (the camera moves to the left).
3.2 **Press the "Camera right" button** (now nothing happens, because the "Camera left" button lost focus and called the GLFW.onBlur method which cancelled the pressed button's key press event).
3.3 **Press again the "Camera right" button** (now the camera moves to the right since there weren't any focus lost events).
4. **Wait ~10 seconds** until at the top left corner the red "Blur bug demo." text changes to "Blur bug patch active.".
5. **Press again the "Camera left" button, then the "Camera right".** Notice that the bug is no longer present.

The patch removes the GLFW.onBlur method from the window's blur event listeners list and adds a wrapper method that checks the event's source.
If the source is the window, then it calls the GLFW.onBlur method, otherwise (when just html elements are losing focus) it does nothing.

### Patch
```
window.removeEventListener("blur", GLFW.onBlur, true);
window.removeEventListener("blur", GLFW.onBlur, true);
window.addEventListener("blur", function(event){
if(event.target == window) GLFW.onBlur(event);
}, true);
```

Tested on Windows 8.1, Firefox 89.0.2 (64-bit) and Chrome 91.0.4472.124 (64-bit).

I recommend adding the `if(event.target == window) return;` check inside the **GLFW.onBlur** method in src/library_glfw.js after `if (!GLFW.active) return;` (search for `onBlur: function(event) {`).

Feel free to inspect the demo site's console. It logs the javascript blur events and the GLFW key events.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.