From 4621246cec88a36e532df6d343ebb2e304a721c0 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 14 Nov 2020 09:16:26 +0100
Subject: [PATCH] Updated color-picker and fixed error when left open and modal
 is closed

---
 package-lock.json                 | 27 ++++++++++++++++++++-------
 package.json                      |  2 +-
 src/tags/helpers/EditTagModal.tsx |  4 ++--
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 104cb049..e63727d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16452,6 +16452,11 @@
       "resolved": "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -22894,16 +22899,24 @@
       }
     },
     "react-color": {
-      "version": "2.18.1",
-      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",
-      "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==",
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
       "requires": {
         "@icons/material": "^0.2.4",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
         "material-colors": "^1.2.1",
         "prop-types": "^15.5.10",
         "reactcss": "^1.2.0",
         "tinycolor2": "^1.4.1"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.20",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+        }
       }
     },
     "react-copy-to-clipboard": {
@@ -27150,9 +27163,9 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tinycolor2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
-      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
     },
     "tmp": {
       "version": "0.0.33",
diff --git a/package.json b/package.json
index 53bf7945..db42e41b 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "react": "^17.0.1",
     "react-autosuggest": "^10.0.2",
     "react-chartjs-2": "^2.10.0",
-    "react-color": "^2.18.1",
+    "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.0.2",
     "react-datepicker": "~1.5.0",
     "react-dom": "^17.0.1",
diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx
index d530a7a4..b1ae9c0d 100644
--- a/src/tags/helpers/EditTagModal.tsx
+++ b/src/tags/helpers/EditTagModal.tsx
@@ -21,14 +21,14 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
 ) => {
   const [ newTagName, setNewTagName ] = useState(tag);
   const [ color, setColor ] = useState(getColorForKey(tag));
-  const [ showColorPicker, toggleColorPicker ] = useToggle();
+  const [ showColorPicker, toggleColorPicker, , hideColorPicker ] = useToggle();
   const saveTag = handleEventPreventingDefault(async () => editTag(tag, newTagName, color)
     .then(() => tagEdited(tag, newTagName, color))
     .then(toggle)
     .catch(() => {}));
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={hideColorPicker}>
       <form onSubmit={saveTag}>
         <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
         <ModalBody>