Lost of focus in html5


#1

Hi,

I have a really strange issue since 3 days. I can navigate in my game with the mouse, opening and closing popups etc … But I can’t use my keyboard to play it. I have to click again in the game and then everything is fine. It is like I lost focus all the time when I use my mouse, which is difficult to understand. It happens only in HTML5 export. Flash is fine. I had a look and there is nothing that helps in forum.
I update to last openFL version to try, and also rollback to a former version of my work, and the issue is still there.
Anyone has an idea ?


#2

I’ve fought my way with focus but the other way around - focus was there all the time even when I navigated on the page that’s enclosing the game. Please show an example of code where you’re listening for Keyboard events.

Maybe you’re preventing some events outside the game so they do not reach in? Have you recently updated Chrome - maybe check another browser for that one?

My problems were with actual focus lost and gain and keyboard events while the focus is not there - I had to set custom onfocus/onblur for container the game is in.

Also you can try with OpenFL and Lime develop branches.


#3

Well my code is simple as f*cked and worked few days ago … without any changes, it stops working. (Even tried to rollback to a 5 months old code to check and doesn’t work anymore too …)

this._container.stage.addEventListener(KeyboardEvent.KEY_DOWN, this.onKeyDown);

private function onKeyDown(e:KeyboardEvent):Void {
if (e.keyCode == Keyboard.LEFT)
this._layoutModel.tryMovePiece(new Point( -1, 0));
else if (e.keyCode == Keyboard.RIGHT)
this._layoutModel.tryMovePiece(new Point( 1, 0));
else if (e.keyCode == Keyboard.DOWN)
this._layoutModel.fastMoveDown();
else if (e.keyCode == Keyboard.UP)
this._layoutModel.tryRotate();
else if (e.keyCode == Keyboard.SPACE)
this._layoutModel.instantMoveDown();
}
I have updated openFL / Chrome / Firefox … Nothing works.
I even tried to do a call to JS to do this :
document.getElementById(‘openfl-content’).click(); to simulate a click or use focus … Nothing works … I have to click on the DIV … Don’t understand which part of my code remove the focus …


#4

Have you tried traces or a window alert to ensure your listener is registered, and the key event is not firing? I wonder if OpenFL receives the event, but something is stopping propagation? Is there anything else on your HTML page?


#5

Yes it is registered I see it in console. It looks like I can use the keyboard for few milliseconds, and then the focus is lost until I manually click again in the game.
Even if there is nothing in the html page but the game … That’s really a strange behavior.


#6

That is! Any browser extensions at work?


#7

Nothing. And tested on chrome and firefox (Windows) and Firefox on ubuntu16.04 and 18.04
Tried to rollback to Lime 7.1.0 too.


#8

Does this happen using the HandlingKeyboardEvents sample?

openfl creating HandlingKeyboardEvents
cd HandlingKeyboardEvents
openfl test html5

It should work with the keyboard, though the HTML page may require initial focus


#9

In my code I have e.stopPropagation() in every onKeyDown and onKeyUp - maybe that keeps me from loosing focus? Try that out maybe it will work for you. Looks like that:

private function onKeyDown(e:KeyboardEvent):Void {
        if (...custom onblur/onfocus flag...) {
            // do some listeners stuff

            e.stopPropagation();
        }
    }

my custom focus/blur is something like that:

if (null != this.container) {
            this.container.onfocus = this.onGained;
            this.container.onblur = this.onLost;
        }

Container is that document.getElementById(‘openfl-content’) of yours and I have it setup like below:
<div id="openfl-content" class="..." tabindex="-1" style="outline:none;"></div>
To actually have onfocus/onblur methods working.


#10

Hi,

I tested the stop Propagation and it doesn’t work. Anyway the HandlingKeyboardEvents project works fine.
The more I work on this bug, the less I understand how it can happen.


#11

Do you use stopImmediatePropagation, stopPropagation or preventDefault in any of your OpenFL event listeners?


#12

I don’t use any of them. I checked in javascript and the game doesn’t lose focus at all.
I tried to play in canvas only and the bug is still present.
I compiled on another computer but Windows too. Could it help to compile on linux version ?
And it works when I compile to flash. Keyboard in html 5 is active for few milliseconds, that’s what I don’t understand … why doesn’t it stop working, and why does it work again if I click on the DIV … That makes no sense.


#13

So tell me again, clicking the mouse causes the loss in focus? Clicking it on the project, or outside the project? Are there any other triggers?


#14

I navigate through my game with mouse. When I load a layout, and need keyboard to play (like a tetris), keyboard is active for some milliseconds, then stops. (I can move my pieces a bit). As soon as I click on the game with the mouse, everything is fine again. I have tested in javascript and the game doesn’t lose focus.
What is also strange is : I rollbacked to a former version of my game (weeks ago to be sure), and the same behavior happens, which obviously was fine weeks ago. I also rollback the last windows update in case of. It doesn’t work.
As I have no idea what happens, I found a work around : I listen to keyboard event from browser, and send the event to my game :

window.addEventListener("keyup", function(e) {
	 document.getElementById('openfl-content').onKeyUp(e.keyCode);
}, false); 

I will see with nexts Lime - openFL - haxe version if the bug is fixed for me.


#15

OpenFL 8.7.0 has a change, “Added support for using <tab> to set focus (tabIndex , tabChildren etc)” which could affect focus. Would you mind, trying an OpenFL and a Lime version that’s a version older, and seeing if it behaves the same as you are seeing? Thank you so much for your help :slight_smile:


#16

Ok, I will check as soon as I am back from holidays.


#17

Hi,

Checked with openFL 8.6.0 and Lime 7.1.0 and the issue is still here