From 8a99d8033c381be576dfacd114203e498205cf20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 4 Oct 2024 00:53:20 +0200
Subject: [PATCH] Do not render unnecessary emoji picker dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../emoji-picker-dropdown-container.tsx       | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 093d26f71..6d77f10c5 100644
--- a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -70,25 +70,27 @@ const EmojiPickerDropdownContainer: React.FC<IEmojiPickerDropdownContainer> = ({
           tabIndex={0}
         />)}
 
-      <Portal>
-        <div
-          className='z-[101]'
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            width: 'max-content',
-          }}
-        >
-          <EmojiPickerDropdown
-            visible={visible}
-            setVisible={setVisible}
-            update={update}
-            {...props}
-          />
-        </div>
-      </Portal>
+      {visible && (
+        <Portal>
+          <div
+            className='z-[101]'
+            ref={refs.setFloating}
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              width: 'max-content',
+            }}
+          >
+            <EmojiPickerDropdown
+              visible
+              setVisible={setVisible}
+              update={update}
+              {...props}
+            />
+          </div>
+        </Portal>
+      )}
     </div>
   );
 };