Added stop progagation to map controls to stop drawing empty shapes

src/components/map/MapControls.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from "react";
+import React, { useState, Fragment, useEffect, useRef } from "react";
 import { IconButton, Flex, Box } from "theme-ui";
 
 import RadioIconButton from "./controls/RadioIconButton";
@@ -168,6 +168,9 @@ function MapContols({
     );
   }
 
+  const controlsRef = useRef();
+  const settingsRef = useRef();
+
   function getToolSettings() {
     const Settings = toolsById[selectedToolId].SettingsComponent;
     if (Settings) {
@@ -182,6 +185,7 @@ function MapContols({
             borderRadius: "4px",
           }}
           p={1}
+          ref={settingsRef}
         >
           <Settings
             settings={toolSettings[selectedToolId]}
@@ -196,6 +200,35 @@ function MapContols({
     }
   }
 
+  // Stop map drawing from happening when selecting controls
+  // Not using react events as they seem to trigger after dom events
+  useEffect(() => {
+    function stopPropagation(e) {
+      e.stopPropagation();
+    }
+    const controls = controlsRef.current;
+    if (controls) {
+      controls.addEventListener("mousedown", stopPropagation);
+      controls.addEventListener("touchstart", stopPropagation);
+    }
+    const settings = settingsRef.current;
+    if (settings) {
+      settings.addEventListener("mousedown", stopPropagation);
+      settings.addEventListener("touchstart", stopPropagation);
+    }
+
+    return () => {
+      if (controls) {
+        controls.removeEventListener("mousedown", stopPropagation);
+        controls.removeEventListener("touchstart", stopPropagation);
+      }
+      if (settings) {
+        settings.removeEventListener("mousedown", stopPropagation);
+        settings.removeEventListener("touchstart", stopPropagation);
+      }
+    };
+  });
+
   return (
     <>
       <Flex
@@ -207,6 +240,7 @@ function MapContols({
           alignItems: "center",
         }}
         mx={1}
+        ref={controlsRef}
       >
         {controls}
       </Flex>