Fix custom controls with user-provided element

src/ol/control/Attribution.js

@@ -48,10 +48,10 @@ class Attribution extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
-    this.createElement();
 
     /**
      * @private

src/ol/control/Control.js

@@ -50,11 +50,16 @@ class Control extends BaseObject {
   constructor(options) {
     super();
 
+    const element = options.element;
+    if (element && !options.target && !element.style.pointerEvents) {
+      element.style.pointerEvents = 'auto';
+    }
+
     /**
      * @protected
      * @type {HTMLElement}
      */
-    this.element = options.element ? options.element : null;
+    this.element = element ? element : null;
 
     /**
      * @private
@@ -83,17 +88,6 @@ class Control extends BaseObject {
     }
   }
 
-  /**
-   * Creates the element for this control and sets it on the instance.
-   * @return {HTMLDivElement} Element for this control.
-   */
-  createElement() {
-    const element = document.createElement('div');
-    element.style.pointerEvents = 'auto';
-    this.element = element;
-    return element;
-  }
-
   /**
    * Clean up.
    */

src/ol/control/FullScreen.js

@@ -72,9 +72,9 @@ class FullScreen extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       target: options.target,
     });
-    this.createElement();
 
     /**
      * @private

src/ol/control/MousePosition.js

@@ -60,15 +60,16 @@ class MousePosition extends Control {
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
+    const element = document.createElement('div');
+    element.className =
+      options.className !== undefined ? options.className : 'ol-mouse-position';
+
     super({
+      element: element,
       render: options.render,
       target: options.target,
     });
 
-    const element = this.createElement();
-    element.className =
-      options.className !== undefined ? options.className : 'ol-mouse-position';
-
     this.addEventListener(
       getChangeEventType(PROJECTION),
       this.handleProjectionChanged_

src/ol/control/OverviewMap.js

@@ -80,10 +80,10 @@ class OverviewMap extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
-    this.createElement();
 
     /**
      * @private

src/ol/control/Rotate.js

@@ -38,10 +38,10 @@ class Rotate extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
-    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-rotate';

src/ol/control/ScaleLine.js

@@ -86,10 +86,10 @@ class ScaleLine extends Control {
         : 'ol-scale-line';
 
     super({
+      element: document.createElement('div'),
       render: options.render,
       target: options.target,
     });
-    this.createElement();
 
     /**
      * @private

src/ol/control/Zoom.js

@@ -37,9 +37,9 @@ class Zoom extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       target: options.target,
     });
-    this.createElement();
 
     const className =
       options.className !== undefined ? options.className : 'ol-zoom';

src/ol/control/ZoomSlider.js

@@ -48,9 +48,9 @@ class ZoomSlider extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       render: options.render,
     });
-    this.createElement();
 
     /**
      * @type {!Array.<import("../events.js").EventsKey>}

src/ol/control/ZoomToExtent.js

@@ -33,9 +33,9 @@ class ZoomToExtent extends Control {
     const options = opt_options ? opt_options : {};
 
     super({
+      element: document.createElement('div'),
       target: options.target,
     });
-    this.createElement();
 
     /**
      * @type {?import("../extent.js").Extent}

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

@@ -27,6 +27,30 @@ describe('ol.control.Control', function () {
   });
 });
 
+describe('element', function () {
+  it('sets `pointer-events: auto` for default target', function () {
+    const control = new Control({
+      element: document.createElement('div'),
+    });
+    expect(control.element.style.pointerEvents).to.be('auto');
+  });
+  it('does not set `pointer-events: auto` for custom target', function () {
+    const control = new Control({
+      element: document.createElement('div'),
+      target: document.createElement('div'),
+    });
+    expect(control.element.style.pointerEvents).to.be('');
+  });
+  it('does not override `pointer-events` style', function () {
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'none';
+    const control = new Control({
+      element: element,
+    });
+    expect(control.element.style.pointerEvents).to.be('none');
+  });
+});
+
 describe("ol.control.Control's target", function () {
   describe('target as string or element', function () {
     it('transforms target from string to element', function () {