Merge pull request #12488 from JakobMiksch/fix-mouse-control-white-space

MousePosition: allow rendering of empty string

src/ol/control/MousePosition.js

@@ -35,8 +35,8 @@ const COORDINATE_FORMAT = 'coordinateFormat';
  * @property {string} [undefinedHTML=' '] Markup to show when coordinates are not
  * available (e.g. when the pointer leaves the map viewport).  By default, the last position
  * will be replaced with `' '` (` `) when the pointer leaves the viewport.  To
- * retain the last rendered position, set this option to something falsey (like an empty
+ * retain the last rendered position, set this option to something falsey. An exception is an
- * string `''`).
+ * empty string `''`. It does not count as falsey in this case.
  */
 
 /**
@@ -89,7 +89,8 @@ class MousePosition extends Control {
      * @private
      * @type {boolean}
      */
-    this.renderOnMouseOut_ = !!this.undefinedHTML_;
+    this.renderOnMouseOut_ =
+      this.undefinedHTML_ === '' || !!this.undefinedHTML_;
 
     /**
      * @private

test/browser/spec/ol/control/mouseposition.test.js

@@ -105,9 +105,9 @@ describe('ol/control/MousePosition', function () {
         expect(element.innerHTML).to.be(' ');
       });
 
-      it('retains the mouse position when undefinedHTML is falsey and mouse moves outside the viewport', function () {
+      it('retains the mouse position when undefinedHTML is false and mouse moves outside the viewport', function () {
         const ctrl = new MousePosition({
-          undefinedHTML: '',
+          undefinedHTML: false,
         });
         ctrl.setMap(map);
         map.renderSync();
@@ -127,6 +127,29 @@ describe('ol/control/MousePosition', function () {
         simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
         expect(element.innerHTML).to.be('20,-30');
       });
+
+      it('renders an empty string if undefinedHTML is an empty string and mouse moves outside the viewport', function () {
+        const ctrl = new MousePosition({
+          undefinedHTML: '',
+        });
+        ctrl.setMap(map);
+        map.renderSync();
+
+        const element = document.querySelector(
+          '.ol-mouse-position',
+          map.getTarget()
+        );
+
+        simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be('');
+
+        target.dispatchEvent(new PointerEvent('pointermove'));
+        simulateEvent(EventType.POINTERMOVE, 20, 30);
+        expect(element.innerHTML).to.be('20,-30');
+
+        simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be('');
+      });
     });
   });
 });