Behavior change of arrow keys in Babylon.js v5.0.0-alpha.6

Questions
1

I have a “tool”, which I have not run in about a week. It has a number of html text fields for edit of database info. There is also a scene to the right wt an arc rotate camera. Have just been using preview, though not really required.

When I am in a text field & moving the cursor with the arrow keys, the camera now moves as well. I double checked that it is not something weird on my machine by going back to the CDN. Things are normal there.

2

Oooh this is pretty annoying but a couple PRs went in recently about inputs :frowning:

The biggest one from @PolygonalSun who could have a look :slight_smile:

And another one to remove some of the Chrome annoying warnings.

@JCPalmer would you be able to provide a repro or the commit where it starts breaking ?

4

I know I worked on this on Friday, 1/8, and it was fine with preview. Can make a simple html page with a text field & a box in a scene, probably late today. Will inline it directly into forum, if allowed, else a zip attachment. Not going publish such a simple page.

This is minor to me, and not half as annoying as the tool itself. Been putting in syllable delimiters into words of the ARPABET phonic dictionary, or at least 44k of the 124k words I have decided to keep. Been working on it since late Feb. Only up to passion with 14,408 to go :sweat:.

All forms of speech is done in units of syllables. Had a talking head in a scene which could say words / pronunciations that I had finished to test syllables / font / animation. It can say complicated words faster than I can, but this is exhausting.

5

Yup a zip would be totally fine.

I am just hoping we did not break too many other things, so it is way better to double check. Thanks a lot for all your help as usual @JCPalmer

6 
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://preview.babylonjs.com/babylon.js"></script>

    <style>
        #renderCanvas{ width: 50%; height: 50%; }
    </style>
</head>

<body>
    <div>
        Word: <input type="text" id="word" value="sample">
    </div>
    <canvas id="renderCanvas"></canvas>

<script>
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas, true);

    let scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(.5,.5,.5);
    const box = BABYLON.Mesh.CreateBox("", 0.1, scene);

    const material = new BABYLON.StandardMaterial("", scene);
    material.emissiveColor = new BABYLON.Color3(1,.337,.183);
    box.material = material;


    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 1.6, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas);

    engine.runRenderLoop(function () { scene.render(); });

    window.addEventListener("resize", function () {
        engine.resize();
    });

</script>
</body>
</html>
7

Hey I think I know what’s going on. Lemme just verify something because if it’s what I think it is, it should be an easy fix.

8

This issue looks like it was related the keydown/up listener being added to the window, rather than the canvas. The fix is currently in a PR.

2 Likes