Fix bug that caused closing the select map modal to select the map

Added ability to deselect a map by clicking outside of the map select tile

src/components/map/MapTile.js

@@ -109,7 +109,8 @@ function MapTile({
       }}
       m={2}
       bg="muted"
-      onClick={() => {
+      onClick={(e) => {
+        e.stopPropagation();
         setIsTileMenuOpen(false);
         if (!isSelected) {
           onMapSelect(map);

src/components/map/MapTiles.js

@@ -31,6 +31,7 @@ function MapTiles({
             width: "500px",
             borderRadius: "4px",
           }}
+          onClick={() => onMapSelect(null)}
         >
           <Flex
             onClick={onMapAdd}

src/modals/SelectMapModal.js

@@ -184,7 +184,11 @@ function SelectMapModal({
 
   async function handleMapSelect(map) {
     await applyMapChanges();
-    setSelectedMapId(map.id);
+    if (map) {
+      setSelectedMapId(map.id);
+    } else {
+      setSelectedMapId(null);
+    }
   }
 
   async function handleMapReset(id) {
@@ -195,6 +199,13 @@ function SelectMapModal({
     }
   }
 
+  async function handleClose() {
+    if (selectedMapId) {
+      await applyMapChanges();
+    }
+    onDone();
+  }
+
   async function handleDone() {
     if (imageLoading) {
       return;
@@ -202,6 +213,8 @@ function SelectMapModal({
     if (selectedMapId) {
       await applyMapChanges();
       onMapChange(selectedMapWithChanges, selectedMapStateWithChanges);
+    } else {
+      onMapChange(null, null);
     }
     onDone();
   }
@@ -250,7 +263,7 @@ function SelectMapModal({
   };
 
   return (
-    <Modal isOpen={isOpen} onRequestClose={handleDone}>
+    <Modal isOpen={isOpen} onRequestClose={handleClose}>
       <ImageDrop onDrop={handleImagesUpload} dropText="Drop map to upload">
         <input
           onChange={(event) => handleImagesUpload(event.target.files)}