fix emoji

src/components/ReactionPicker.css

@@ -1,14 +1,27 @@
 .reaction-container {
-    position: relative; /* Parent must be positioned relatively */
-  }
-  
-  .emoji-picker {
-    position: absolute; /* Picker positioned absolutely relative to the parent */
-    right: 0;
-    z-index: 1000; /* Ensure picker appears above other content */
-  }
-  
-  .message-container {
-    overflow: visible; /* Ensure the message container doesn't cut off the picker */
-  }
-  
+  position: relative; /* Parent must be positioned relatively */
+}
+
+.emoji-picker {
+  position: absolute; /* Picker positioned absolutely relative to the parent */
+  right: 0;
+  z-index: 9000000000; /* Ensure picker appears above other content */
+}
+
+.message-container {
+  overflow: visible; /* Ensure the message container doesn't cut off the picker */
+}
+
+
+.reaction-container {
+  position: relative;
+}
+
+.emoji-picker {
+  overflow: hidden;
+  width: auto
+}
+
+.EmojiPickerReact.epr-dark-theme {
+  --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */
+}

src/components/ReactionPicker.tsx

@@ -1,39 +1,65 @@
 import React, { useState, useRef, useEffect } from 'react';
-import Picker, { Theme } from 'emoji-picker-react';
-import './ReactionPicker.css'; // CSS for proper positioning
+import ReactDOM from 'react-dom';
+import Picker, { EmojiStyle, Theme } from 'emoji-picker-react';
+import './ReactionPicker.css';
 import { ButtonBase } from '@mui/material';
 import { isMobile } from '../App';
 
 export const ReactionPicker = ({ onReaction }) => {
-  const [showPicker, setShowPicker] = useState(false); // Manage picker visibility
-  const pickerRef = useRef(null); // Reference to the picker
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerPosition, setPickerPosition] = useState({ top: 0, left: 0 });
+  const pickerRef = useRef(null);
+  const buttonRef = useRef(null);
 
   const handleReaction = (emojiObject) => {
-    onReaction(emojiObject.emoji);  // Handle the selected emoji reaction
-    setShowPicker(false); // Close picker after selection
+    onReaction(emojiObject.emoji);
+    setShowPicker(false);
   };
+
   const handlePicker = (emojiObject) => {
-    
-    onReaction(emojiObject.emoji);  // Handle the selected emoji reaction
-    setShowPicker(false); // Close picker after selection
+    onReaction(emojiObject.emoji);
+    setShowPicker(false);
+  };
+
+  const togglePicker = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (showPicker) {
+      setShowPicker(false);
+    } else {
+      // Get the button's position
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const pickerWidth = isMobile ? 300 : 350; // Adjust based on picker width
+
+      // Calculate position to align the right edge of the picker with the button's right edge
+      setPickerPosition({
+        top: buttonRect.bottom + window.scrollY, // Position below the button
+        left: buttonRect.right + window.scrollX - pickerWidth, // Align right edges
+      });
+      setShowPicker(true);
+    }
   };
 
   // Close picker if clicked outside
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-        setShowPicker(false); // Close picker
+      if (
+        pickerRef.current &&
+        !pickerRef.current.contains(event.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target)
+      ) {
+        setShowPicker(false);
       }
     };
 
-    // Add event listener when picker is shown
     if (showPicker) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
 
-    // Clean up the event listener on unmount
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -42,42 +68,41 @@ export const ReactionPicker = ({ onReaction }) => {
   return (
     <div className="reaction-container">
       {/* Emoji CTA */}
-      <ButtonBase sx={{
-        fontSize: '22px'
-      }} 
-      // onTouchStart={(e) => {
-      //   e.preventDefault(); // Prevent mobile keyboard
-      //   e.stopPropagation(); 
-      //   if(!isMobile) return
-      //   setShowPicker(!showPicker);
-      // }}
-      onClick={(e) => {
-        e.preventDefault(); // Prevents any focus issues
-        e.stopPropagation(); 
-        // if(isMobile) return
-
-        setShowPicker(!showPicker);
-      }}
-      
+      <ButtonBase
+        sx={{ fontSize: '22px' }}
+        ref={buttonRef}
+        onClick={togglePicker}
       >
         😃
       </ButtonBase>
 
-      {/* Emoji Picker with dark theme */}
-      {showPicker && (
-        <div className="emoji-picker" ref={pickerRef} onClick={(e) => e.preventDefault()}>
-          <Picker
-            height={isMobile ? 350 : 450}
-            width={isMobile ? 300 : 350 }
-            reactionsDefaultOpen={true}
-            onReactionClick={handleReaction}
-            onEmojiClick={handlePicker}
-            allowExpandReactions={true}
-            autoFocusSearch={false}
-            theme={Theme.DARK} 
-          />
-        </div>
-      )}
+      {/* Emoji Picker rendered in a portal with calculated position */}
+      {showPicker &&
+        ReactDOM.createPortal(
+          <div
+            className="emoji-picker"
+            ref={pickerRef}
+            style={{
+              position: 'absolute',
+              top: pickerPosition.top,
+              left: pickerPosition.left,
+              zIndex: 1000,
+            }}
+          >
+            <Picker
+              height={isMobile ? 350 : 450}
+              width={isMobile ? 300 : 350}
+              reactionsDefaultOpen={true}
+              onReactionClick={handleReaction}
+              onEmojiClick={handlePicker}
+              allowExpandReactions={true}
+              autoFocusSearch={false}
+              theme={Theme.DARK}
+              emojiStyle={EmojiStyle.NATIVE}
+            />
+          </div>,
+          document.body
+        )}
     </div>
   );
 };