How to disable click event on map or draw object in OpenLayers 6.4.2?

I am trying to disable programmatically the ability to put a point (either point of a line or polygon) in the map through either the draw object or the map one with the click of a button. Looking at the documentation for OpenLayers 6 draw object there is an option to do this by adding:

stopClick boolean (defaults to false) : Stop click, singleclick, and doubleclick events from firing during drawing. to the draw object constructor which is also present in 6.4.2.

But on implementation it did not work as expected.

I also searched on GitHub if this was a bug or opening possible one but I could not find any for this specific version of Openlayers, even tho a bug similar was fixed in version 6.5.0 this bug was not present in Openlayers 6.4.2

I also tried to search for countless QA in Stackoverflow or GitHub issues but they were either for older versions or did not work at all. My code looks like this:

package.json

{
  "name": "min-zoom",
  "dependencies": {
    "ol": "6.4.2"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>View Min-Zoom</title>
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button id="Off">Draw off</button>
    <script src="main.js"></script>
  </body>
</html>

and

main.js

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import "ol/ol.css";
import { Draw } from "ol/interaction";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";

var raster = new TileLayer({
  source: new OSM()
});

var source = new VectorSource({ wrapX: false });

var vector = new VectorLayer({
  source: source
});

var view = new View({
  center: [0, 0],
  zoom: [0]
});

var map = new Map({
  layers: [raster, vector],
  target: "map",
  view: view
});

var draw = new Draw({
  source: source,
  type: "Polygon",
  stopClick: true // does not work
});

map.addInteraction(draw);

map.removeEventListener("click");
draw.removeEventListener("click");

map.removeEventListener("singleclick");
draw.removeEventListener("singleclick");

map.un("click", () => {});
draw.un("click", () => {});

map.un("singleclick", () => {});
draw.un("singleclick", () => {});

map.on("click", (event) => {
  event.preventDefault();
  event.stopPropagation();
});

draw.on("click", (event) => {
  event.preventDefault();
  event.stopPropagation();
});
var singleclick_key = map.on("singleclick", function (evt) {
  console.log("not here");
});
// map.unByKey(singleclick_key); // this does not work with openlayer 6

Which can also be found in here: https://codesandbox.io/s/min-zoom-forked-ix2i6?file=/main.js

Is there any other way except the one I already tried to achieve this, or is indeed one bug in OpenLayers?

Solution

It turns out that:

stopClick is not intended to prevent drawing, it prevents a click event handled by the draw being propagated to the map and firing any listeners you have set on the map https://codesandbox.io/s/min-zoom-forked-dz3h8

Kudos to the original answer here: https://github.com/openlayers/openlayers/issues/12232