diff --git a/CHANGES.md b/CHANGES.md index 3b8e693e665e..20b87eedb2e2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,6 +1,12 @@ Change Log ========== +### 1.68.0 - 2020-04-01 + +##### Fixes :wrench: + +* Interacting with the Cesium canvas will now blur the previously focused element. This prevents unintended modification of input elements when interacting with the globe. + ### 1.67.0 - 2020-03-02 ##### Breaking Changes :mega: diff --git a/Source/Widgets/CesiumWidget/CesiumWidget.js b/Source/Widgets/CesiumWidget/CesiumWidget.js index 1c9d321fb1fb..33e6e7e4b8fd 100644 --- a/Source/Widgets/CesiumWidget/CesiumWidget.js +++ b/Source/Widgets/CesiumWidget/CesiumWidget.js @@ -204,6 +204,19 @@ import getElement from '../getElement.js'; canvas.onselectstart = function() { return false; }; + + // Interacting with a canvas does not automatically blur the previously focused element. + // This leads to unexpected interaction if the last element was an input field. + // For example, clicking the mouse wheel could lead to the value in the field changing + // unexpectedly. The solution is to blur whatever has focus as soon as canvas interaction begins. + function blurActiveElement() { + if (canvas !== canvas.ownerDocument.activeElement) { + canvas.ownerDocument.activeElement.blur(); + } + } + canvas.addEventListener('mousedown', blurActiveElement); + canvas.addEventListener('pointerdown', blurActiveElement); + element.appendChild(canvas); var innerCreditContainer = document.createElement('div');