emscripten-core / emscripten-core/emscripten
All pressed keys are released when any html element loses focus when using GLFW
- 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
Assessment
This issue has not been assessed yet.