Final update for keyboard handling (now done at canvas level and not at window level)

dist/preview release/babylon.max.js

@@ -12501,6 +12501,7 @@ var BABYLON;
                         };
                         if (!noPreventDefault) {
                             evt.preventDefault();
+                            element.focus();
                         }
                     }
                     else if (p.type === BABYLON.PointerEventTypes.POINTERUP) {
@@ -12578,9 +12579,7 @@ var BABYLON;
         FreeCameraKeyboardMoveInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
             if (!this._onKeyDown) {
-                if (!element.tabIndex) {
-                    element.tabIndex = 1;
-                }
+                element.tabIndex = 1;
                 this._onKeyDown = function (evt) {
                     if (_this.keysUp.indexOf(evt.keyCode) !== -1 ||
                         _this.keysDown.indexOf(evt.keyCode) !== -1 ||
@@ -12990,9 +12989,7 @@ var BABYLON;
         }
         ArcRotateCameraKeyboardMoveInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
-            if (!element.tabIndex) {
-                element.tabIndex = 1;
-            }
+            element.tabIndex = 1;
             this._onKeyDown = function (evt) {
                 if (_this.keysUp.indexOf(evt.keyCode) !== -1 ||
                     _this.keysDown.indexOf(evt.keyCode) !== -1 ||
@@ -13182,6 +13179,7 @@ var BABYLON;
                     }
                     if (!noPreventDefault) {
                         evt.preventDefault();
+                        element.focus();
                     }
                 }
                 else if (p.type === BABYLON.PointerEventTypes.POINTERUP) {
@@ -13301,9 +13299,9 @@ var BABYLON;
             element.addEventListener("mousemove", this._onMouseMove, false);
             element.addEventListener("MSPointerDown", this._onGestureStart, false);
             element.addEventListener("MSGestureChange", this._onGesture, false);
+            element.addEventListener("keydown", this._onKeyDown, false);
+            element.addEventListener("keyup", this._onKeyUp, false);
             BABYLON.Tools.RegisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         };
@@ -13315,6 +13313,8 @@ var BABYLON;
                 element.removeEventListener("mousemove", this._onMouseMove);
                 element.removeEventListener("MSPointerDown", this._onGestureStart);
                 element.removeEventListener("MSGestureChange", this._onGesture);
+                element.removeEventListener("keydown", this._onKeyDown);
+                element.removeEventListener("keyup", this._onKeyUp);
                 this._isRightClick = false;
                 this._isCtrlPushed = false;
                 this.pinchInwards = true;
@@ -13328,8 +13328,6 @@ var BABYLON;
                 this._onContextMenu = null;
             }
             BABYLON.Tools.UnregisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         };
@@ -15777,9 +15775,7 @@ var BABYLON;
             if (attachUp) {
                 canvas.addEventListener(eventPrefix + "up", this._onPointerUp, false);
             }
-            if (!canvas.tabIndex) {
-                canvas.tabIndex = 1;
-            }
+            canvas.tabIndex = 1;
             canvas.addEventListener("keydown", this._onKeyDown, false);
             canvas.addEventListener("keyup", this._onKeyUp, false);
         };

dist/preview release/what's new.md

@@ -7,9 +7,10 @@
 - Several memory allocation reduction ([benaadams](https://github.com/benaadams)) 
 - Several GPU state change reduction ([benaadams](https://github.com/benaadams)) 
 - MapTexture: add `supersample` mode to double font quality. ([nockawa](https://github.com/nockawa))
-- new `invertUV` parameter an all ribbon based shapes : ribbon, tube, lathe, basic and custom extrusion
-- Text2D: new `fontSuperSample` setting to use high quality font.
+- New `invertUV` parameter an all ribbon based shapes : ribbon, tube, lathe, basic and custom extrusion ([jerome](https://github.com/jbousquie))
+- Text2D: new `fontSuperSample` setting to use high quality font. ([nockawa](https://github.com/nockawa))
 - PerfCounter class added to monitor time/counter and expose min/max/average/lastSecondAverage/current metrics. Updated engine/scene current counter to use this class, exposing new properties as well to access the PerfCounter object. ([nockawa](https://github.com/nockawa))
+- Better keyboard event handling ([deltakosh](https://github.com/deltakosh)) 
 
 ### Exporters
     

src/Cameras/Inputs/babylon.arcrotatecamera.input.keyboard.js

@@ -16,9 +16,7 @@ var BABYLON;
         }
         ArcRotateCameraKeyboardMoveInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
-            if (!element.tabIndex) {
-                element.tabIndex = 1;
-            }
+            element.tabIndex = 1;
             this._onKeyDown = function (evt) {
                 if (_this.keysUp.indexOf(evt.keyCode) !== -1 ||
                     _this.keysDown.indexOf(evt.keyCode) !== -1 ||

src/Cameras/Inputs/babylon.arcrotatecamera.input.keyboard.ts

@@ -19,9 +19,7 @@ module BABYLON {
         public keysRight = [39];
 
         public attachControl(element: HTMLElement, noPreventDefault?: boolean) {
-            if (!element.tabIndex) {
-                element.tabIndex = 1;
-            }
+            element.tabIndex = 1;
 
             this._onKeyDown = evt => {
 

src/Cameras/Inputs/babylon.arcrotatecamera.input.pointers.js

@@ -43,6 +43,7 @@ var BABYLON;
                     }
                     if (!noPreventDefault) {
                         evt.preventDefault();
+                        element.focus();
                     }
                 }
                 else if (p.type === BABYLON.PointerEventTypes.POINTERUP) {
@@ -162,9 +163,9 @@ var BABYLON;
             element.addEventListener("mousemove", this._onMouseMove, false);
             element.addEventListener("MSPointerDown", this._onGestureStart, false);
             element.addEventListener("MSGestureChange", this._onGesture, false);
+            element.addEventListener("keydown", this._onKeyDown, false);
+            element.addEventListener("keyup", this._onKeyUp, false);
             BABYLON.Tools.RegisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         };
@@ -176,6 +177,8 @@ var BABYLON;
                 element.removeEventListener("mousemove", this._onMouseMove);
                 element.removeEventListener("MSPointerDown", this._onGestureStart);
                 element.removeEventListener("MSGestureChange", this._onGesture);
+                element.removeEventListener("keydown", this._onKeyDown);
+                element.removeEventListener("keyup", this._onKeyUp);
                 this._isRightClick = false;
                 this._isCtrlPushed = false;
                 this.pinchInwards = true;
@@ -189,8 +192,6 @@ var BABYLON;
                 this._onContextMenu = null;
             }
             BABYLON.Tools.UnregisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         };

src/Cameras/Inputs/babylon.arcrotatecamera.input.pointers.ts

@@ -60,6 +60,7 @@ module BABYLON {
                     }
                     if (!noPreventDefault) {
                         evt.preventDefault();
+                        element.focus();
                     }
                 } else if (p.type === PointerEventTypes.POINTERUP) {
                     try {
@@ -201,9 +202,10 @@ module BABYLON {
             element.addEventListener("MSPointerDown", this._onGestureStart, false);
             element.addEventListener("MSGestureChange", this._onGesture, false);
 
+            element.addEventListener("keydown", this._onKeyDown, false);
+            element.addEventListener("keyup", this._onKeyUp, false);
+
             Tools.RegisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         }
@@ -218,6 +220,9 @@ module BABYLON {
                 element.removeEventListener("MSPointerDown", this._onGestureStart);
                 element.removeEventListener("MSGestureChange", this._onGesture);
 
+                element.removeEventListener("keydown", this._onKeyDown);
+                element.removeEventListener("keyup", this._onKeyUp);
+
                 this._isRightClick = false;
                 this._isCtrlPushed = false;
                 this.pinchInwards = true;
@@ -230,12 +235,9 @@ module BABYLON {
                 this._MSGestureHandler = null;
                 this._onLostFocus = null;
                 this._onContextMenu = null;
-
             }
 
             Tools.UnregisterTopRootEvents([
-                { name: "keydown", handler: this._onKeyDown },
-                { name: "keyup", handler: this._onKeyUp },
                 { name: "blur", handler: this._onLostFocus }
             ]);
         }

src/Cameras/Inputs/babylon.freecamera.input.keyboard.js

@@ -17,9 +17,7 @@ var BABYLON;
         FreeCameraKeyboardMoveInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
             if (!this._onKeyDown) {
-                if (!element.tabIndex) {
-                    element.tabIndex = 1;
-                }
+                element.tabIndex = 1;
                 this._onKeyDown = function (evt) {
                     if (_this.keysUp.indexOf(evt.keyCode) !== -1 ||
                         _this.keysDown.indexOf(evt.keyCode) !== -1 ||

src/Cameras/Inputs/babylon.freecamera.input.keyboard.ts

@@ -19,9 +19,7 @@ module BABYLON {
 
         attachControl(element : HTMLElement, noPreventDefault?: boolean) {
             if (!this._onKeyDown) {
-                if (!element.tabIndex) {
-                    element.tabIndex = 1;
-                }
+                element.tabIndex = 1;
 
                 this._onKeyDown = evt => {
                     if (this.keysUp.indexOf(evt.keyCode) !== -1 ||

src/Cameras/Inputs/babylon.freecamera.input.mouse.js

@@ -34,6 +34,7 @@ var BABYLON;
                         };
                         if (!noPreventDefault) {
                             evt.preventDefault();
+                            element.focus();
                         }
                     }
                     else if (p.type === BABYLON.PointerEventTypes.POINTERUP) {

src/Cameras/Inputs/babylon.freecamera.input.mouse.ts

@@ -14,7 +14,6 @@ module BABYLON {
         }
 
         attachControl(element: HTMLElement, noPreventDefault?: boolean) {
-
             if (!this._pointerInput) {
                 var camera = this.camera;
                 var engine = this.camera.getEngine();
@@ -39,6 +38,7 @@ module BABYLON {
 
                         if (!noPreventDefault) {
                             evt.preventDefault();
+                            element.focus();
                         }
                     }
                     else if (p.type === PointerEventTypes.POINTERUP) {
@@ -47,6 +47,7 @@ module BABYLON {
                         } catch (e) {
                             //Nothing to do with the error.
                         }
+
                         this.previousPosition = null;
                         if (!noPreventDefault) {
                             evt.preventDefault();

src/babylon.scene.js

@@ -856,9 +856,7 @@ var BABYLON;
             if (attachUp) {
                 canvas.addEventListener(eventPrefix + "up", this._onPointerUp, false);
             }
-            if (!canvas.tabIndex) {
-                canvas.tabIndex = 1;
-            }
+            canvas.tabIndex = 1;
             canvas.addEventListener("keydown", this._onKeyDown, false);
             canvas.addEventListener("keyup", this._onKeyUp, false);
         };

src/babylon.scene.ts

@@ -990,9 +990,7 @@
                 canvas.addEventListener(eventPrefix + "up", this._onPointerUp, false);
             }
 
-            if (!canvas.tabIndex) {
-                canvas.tabIndex = 1;
-            }
+            canvas.tabIndex = 1;
 
             canvas.addEventListener("keydown", this._onKeyDown, false);
             canvas.addEventListener("keyup", this._onKeyUp, false);