From 9d3c1eb9d50f666b07b0a2c2d8187242b8f41b2c Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 21:35:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20emoji-picker=20fix=20l?=
 =?UTF-8?q?ack=20of=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The EmojiPicker component now displays an overlay
when opened, it fixes an issue when multiple pickers
are present on the same page and we click on one of them,
the others were not closing.
---
 .../doc-editor/components/EmojiPicker.tsx     | 27 ++++++++++++++++++-
 .../components/custom-blocks/CalloutBlock.tsx |  1 +
 .../doc-management/components/DocIcon.tsx     |  5 ++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
index de4a5c90..c9246f65 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
@@ -9,16 +9,18 @@ interface EmojiPickerProps {
   emojiData: EmojiMartData;
   onClickOutside: () => void;
   onEmojiSelect: ({ native }: { native: string }) => void;
+  withOverlay?: boolean;
 }
 
 export const EmojiPicker = ({
   emojiData,
   onClickOutside,
   onEmojiSelect,
+  withOverlay = false,
 }: EmojiPickerProps) => {
   const { i18n } = useTranslation();
 
-  return (
+  const pickerContent = (
     <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
@@ -30,4 +32,27 @@ export const EmojiPicker = ({
       />
     </Box>
   );
+
+  if (withOverlay) {
+    return (
+      <>
+        {/* Overlay transparent pour fermer en cliquant à l'extérieur */}
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            zIndex: 999,
+            backgroundColor: 'transparent',
+          }}
+          onClick={onClickOutside}
+        />
+        {pickerContent}
+      </>
+    );
+  }
+
+  return pickerContent;
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
index 1bed3805..9027ec69 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
@@ -122,6 +122,7 @@ const CalloutComponent = ({
           emojiData={emojidata}
           onClickOutside={onClickOutside}
           onEmojiSelect={onEmojiSelect}
+          withOverlay={true}
         />
       )}
       <Box as="p" className="inline-content" ref={contentRef} />
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
index 1c769d6d..c7a77366 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -77,10 +77,10 @@ export const DocIcon = ({
   return (
     <>
       <BoxButton
+        className="--docs--doc-icon"
         ref={iconRef}
         onClick={toggleEmojiPicker}
-        $position="relative"
-        className="--docs--doc-icon"
+        color="tertiary-text"
       >
         {!emoji ? (
           defaultIcon
@@ -112,6 +112,7 @@ export const DocIcon = ({
               emojiData={emojidata}
               onEmojiSelect={handleEmojiSelect}
               onClickOutside={handleClickOutside}
+              withOverlay={true}
             />
           </div>,
           document.body,