From 93a09db707cf6566af25564dde3b5a60efee35fd Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 6 Aug 2020 13:31:46 +1000
Subject: [PATCH] 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  |  3 ++-
 src/components/map/MapTiles.js |  1 +
 src/modals/SelectMapModal.js   | 17 +++++++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index 6e76a37..c8675d4 100644
--- a/src/components/map/MapTile.js
+++ b/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);
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 88d7961..96060c9 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -31,6 +31,7 @@ function MapTiles({
             width: "500px",
             borderRadius: "4px",
           }}
+          onClick={() => onMapSelect(null)}
         >
           <Flex
             onClick={onMapAdd}
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index dac0603..474f459 100644
--- a/src/modals/SelectMapModal.js
+++ b/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)}