Cesium captures mouse click events

Clicking on the Cesium viewer prevents focus being removed from other page elements. In this example, I added an input textbox that turns red when it has focus and white when it loses it. If you click in the textbox to focus, then click in Cesium, you’ll see the textbox stays red. However if you click elsewhere in the sandcastle app the textbox correctly loses focus. I think this is happening because Cesium is capturing the click event and preventing any default behavior, but I’m not 100% sure. I know this isn’t the default behavior for a canvas though, I checked that with a tiny JSFiddle demo

This gets frustrating when an Cesium has form elements have behavior that relies on focus and clicking away from the element and onto the canvas doesn’t produce the expected behavior.

<style>
    @import url(../templates/bucket.css);
    .myDiv{
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 200px;
    }
    .myDiv input:focus {
        background-color: red;
    }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div class="myDiv"><input type="text"></div>
<div id="toolbar"></div>

[emackey]

Apologies for the broken link. Try this: Sandcastle Demo

CSS is here:

<style>
    @import url(../templates/bucket.css);
    .myDiv{
        position: absolute;
        top: 8px;
        left: 10px;
        height: 30px;
        width: 300px;
    }
    .myDiv input {
        font-size: 16px;
        padding: 2px;
    }
    .myDiv input:focus {
        background-color: yellow;
    }
</style>

HTML:

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div class="myDiv"><input type="text" placeholder="Text entry"></div>
<div id="toolbar"></div>

JS:

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.scene.canvas.setAttribute('tabIndex', 1);

viewer.screenSpaceEventHandler.setInputAction(function(e) {
    viewer.scene.canvas.focus();
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

[emackey]

Here’s my recommended workaround for this. Use this JS code in the same Sandcastle demo as @hpinkos HTML template above, to see the effects:

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.scene.canvas.setAttribute('tabIndex', 1);

viewer.screenSpaceEventHandler.setInputAction(function() {
    viewer.scene.canvas.focus();
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

What happens here is that we set the Cesium canvas itself to have a tabIndex value, allowing it to receive the focus. Then, a pointer-event-friendly click handler is registered that manually assigns the focus to the canvas when clicked. This doesn’t break the geocoder or other widgets because we assigned to the canvas itself, not the container div.

The tabIndex is an app-global number, so I think this workaround needs to be app code, not a Cesium fix (or we would need to expose a way to set the tab index value on the viewer).

The reason this workaround is needed is because we intentionally prevent the default behavior for left-drags, otherwise the credit text and/or widgets would get the blue selection highlight every time you pan the globe.