Any falsey undefinedHTML retains the mouse position

src/ol/control/MousePosition.js

@@ -31,9 +31,11 @@ const COORDINATE_FORMAT = 'coordinateFormat';
  * callback.
  * @property {Element|string} [target] Specify a target if you want the
  * control to be rendered outside of the map's viewport.
- * @property {string} [undefinedHTML=''] Markup for undefined coordinates.  If
+ * @property {string} [undefinedHTML=' '] Markup to show when coordinates are not
- * `undefined`, then the last pointer position is retained when the pointer
+ * available (e.g. when the pointer leaves the map viewport).  By default, the last position
- * moves outside the viewport.
+ * 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
+ * string `''`).
  */
 
 
@@ -78,13 +80,13 @@ const MousePosition = function(opt_options) {
    * @private
    * @type {string}
    */
-  this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : '';
+  this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : ' ';
 
   /**
    * @private
    * @type {boolean}
    */
-  this.renderOnMouseOut_ = this.undefinedHTML_ !== undefined;
+  this.renderOnMouseOut_ = !!this.undefinedHTML_;
 
   /**
    * @private
@@ -238,7 +240,7 @@ MousePosition.prototype.setProjection = function(projection) {
  * @private
  */
 MousePosition.prototype.updateHTML_ = function(pixel) {
-  let html = this.undefinedHTML_ === undefined ? ' ' : this.undefinedHTML_;
+  let html = this.undefinedHTML_;
   if (pixel && this.mapProjection_) {
     if (!this.transform_) {
       const projection = this.getProjection();
@@ -261,7 +263,7 @@ MousePosition.prototype.updateHTML_ = function(pixel) {
       }
     }
   }
-  if (!this.renderedHTML_ || html != this.renderedHTML_) {
+  if (!this.renderedHTML_ || html !== this.renderedHTML_) {
     this.element.innerHTML = html;
     this.renderedHTML_ = html;
   }

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

@@ -1,10 +1,9 @@
 import Map from '../../../../src/ol/Map.js';
 import MousePosition from '../../../../src/ol/control/MousePosition.js';
 import View from '../../../../src/ol/View.js';
-
 import EventType from '../../../../src/ol/events/EventType.js';
 
-describe('ol.control.MousePosition', function() {
+describe('ol/control/MousePosition', function() {
 
   describe('constructor', function() {
 
@@ -66,7 +65,7 @@ describe('ol.control.MousePosition', function() {
     }
 
     describe('undefinedHTML', function() {
-      it('sets div.ol-mouse-position to options.undefinedHTML when mouse moves out', function(done) {
+      it('renders undefinedHTML when mouse moves out', function() {
         const ctrl = new MousePosition({
           undefinedHTML: 'some text'
         });
@@ -74,39 +73,53 @@ describe('ol.control.MousePosition', function() {
         map.renderSync();
 
         const element = document.querySelector('.ol-mouse-position', map.getTarget());
-        expect(element.innerText).to.be('some text');
+
+        simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be('some text');
 
         simulateEvent(EventType.MOUSEMOVE, 20, 30);
-        map.renderSync();
+        expect(element.innerHTML).to.be('20,-30');
-        expect(element.innerText).to.be('20,-30');
 
-        map.once('postrender', function() {
-          expect(element.innerText).to.be('some text');
-          done();
-        });
         simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
-        map.renderSync();
+        expect(element.innerHTML).to.be('some text');
       });
 
-      it('Retain mouse position in div.ol-mouse-position when options.undefinedHTML=undefined and mouse moves outside the viewport', function(done) {
+      it('clears the mouse position by default when the mouse moves outside the viewport', function() {
+        const ctrl = new MousePosition();
+        ctrl.setMap(map);
+        map.renderSync();
+
+        const element = document.querySelector('.ol-mouse-position', map.getTarget());
+
+        simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be(' ');
+
+        target.dispatchEvent(new MouseEvent('mousemove'));
+        simulateEvent(EventType.MOUSEMOVE, 20, 30);
+        expect(element.innerHTML).to.be('20,-30');
+
+        simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be(' ');
+      });
+
+      it('retains the mouse position when undefinedHTML is falsey and mouse moves outside the viewport', function() {
         const ctrl = new MousePosition({
-          undefinedHTML: undefined
+          undefinedHTML: ''
         });
         ctrl.setMap(map);
         map.renderSync();
 
         const element = document.querySelector('.ol-mouse-position', map.getTarget());
-        expect(element.innerHTML).to.be(' ');
+
+        simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
+        expect(element.innerHTML).to.be('');
 
         target.dispatchEvent(new MouseEvent('mousemove'));
         simulateEvent(EventType.MOUSEMOVE, 20, 30);
-        map.renderSync();
+        expect(element.innerHTML).to.be('20,-30');
-        map.once('postrender', function() {
+
-          expect(element.innerText).to.be('20,-30');
-          done();
-        });
         simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
-        map.renderSync();
+        expect(element.innerHTML).to.be('20,-30');
       });
     });
   });