From 9b6dcdb92328ec5527c98e2a61c0472cecc1eb3c Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Mon, 31 Oct 2022 20:10:10 -0700
Subject: [PATCH] Close icon dialog on icon selected.

---
 .../pane/icon-picker/image-icon-tab/index.tsx       |  4 +++-
 .../action-widget/pane/icon-picker/index.tsx        | 13 +++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx
index e31655c8..8ce51bf1 100644
--- a/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx
@@ -6,8 +6,9 @@ import NodeProperty from '../../../../../classes/model/node-property';
 
 type IconImageTab = {
   iconModel: NodeProperty;
+  triggerClose: () => void;
 };
-const IconImageTab = ({ iconModel }: IconImageTab) => {
+const IconImageTab = ({ iconModel, triggerClose }: IconImageTab) => {
   return (
     <Box sx={{ width: '350px' }}>
       {iconGroups.map((family, i) => (
@@ -19,6 +20,7 @@ const IconImageTab = ({ iconModel }: IconImageTab) => {
               src={SvgImageIcon.getImageUrl(icon)}
               onClick={() => {
                 iconModel.setValue(`image:${icon}`);
+                triggerClose();
               }}
             ></img>
           ))}
diff --git a/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx b/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
index 94678b5e..931395e7 100644
--- a/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
@@ -25,11 +25,11 @@ import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 type IconPickerProp = {
-  closeModal: () => void;
+  triggerClose: () => void;
   iconModel: NodeProperty;
 };
 
-const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => {
+const IconPicker = ({ triggerClose, iconModel }: IconPickerProp) => {
   const [checked, setChecked] = React.useState(true);
 
   const handleCheck = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -39,14 +39,15 @@ const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => {
   // Review ...
   useEffect(() => {
     DesignerKeyboard.pause();
-    return () => { DesignerKeyboard.resume(); }
+    return () => {
+      DesignerKeyboard.resume();
+    };
   }, []);
 
-
   const handleEmojiSelect = (emoji: EmojiClickData) => {
     const emojiChar = emoji.emoji;
     iconModel.setValue(`emoji:${emojiChar}`);
-    closeModal();
+    triggerClose();
   };
 
   return (
@@ -64,7 +65,7 @@ const IconPicker = ({ closeModal, iconModel }: IconPickerProp) => {
         />
       )}
 
-      {!checked && <IconImageTab iconModel={iconModel} />}
+      {!checked && <IconImageTab iconModel={iconModel} triggerClose={triggerClose} />}
     </div>
   );
 };