Merge pull request #8662 from CesiumGS/only-took-4-years

Blur previous element when interacting with Cesium canvas.

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:

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');