fix: resolve emoji picker clipping on mobile via React Portals

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -50,6 +50,24 @@ const ChatInputFormattingToolbar = ({
   const [isInsertLinkOpen, setInsertLinkOpen] = useState(false);
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const popoverRef = useRef(null);
+  const emojiTimeoutRef = useRef(null);
+
+  const handleEmojiClose = () => {
+    if (emojiTimeoutRef.current) {
+      clearTimeout(emojiTimeoutRef.current);
+    }
+    emojiTimeoutRef.current = setTimeout(() => {
+      setEmojiOpen(false);
+    }, 300);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (emojiTimeoutRef.current) {
+        clearTimeout(emojiTimeoutRef.current);
+      }
+    };
+  }, []);
 
   const handleClickToOpenFiles = () => {
     inputRef.current.click();
@@ -296,9 +314,8 @@ const ChatInputFormattingToolbar = ({
           if (itemInFormatter) {
             return (
               <Tooltip
-                text={`${itemInFormatter.name} ${
-                  itemInFormatter.shortcut && `(${itemInFormatter.shortcut})`
-                }`}
+                text={`${itemInFormatter.name} ${itemInFormatter.shortcut && `(${itemInFormatter.shortcut})`
+                  }`}
                 position="top"
                 key={`formatter-${itemInFormatter.name}`}
               >
@@ -341,10 +358,10 @@ const ChatInputFormattingToolbar = ({
         <EmojiPicker
           key="emoji-picker"
           handleEmojiClick={(emoji) => {
-            setEmojiOpen(false);
             handleEmojiClick(emoji);
+            handleEmojiClose();
           }}
-          onClose={() => setEmojiOpen(false)}
+          onClose={handleEmojiClose}
           positionStyles={css`
             position: absolute;
             bottom: 7rem;

packages/react/src/views/EmojiPicker/EmojiPicker.js

@@ -1,53 +1,71 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import EmojiPicker from 'emoji-picker-react';
-import { css } from '@emotion/react';
-import PropTypes from 'prop-types';
-import { Box, Popup, useTheme } from '@embeddedchat/ui-elements';
+import { Box, useTheme } from '@embeddedchat/ui-elements';
 import getEmojiPickerStyles from './EmojiPicker.styles';
 
 const CustomEmojiPicker = ({
   handleEmojiClick,
-  positionStyles = css`
-    position: absolute;
-    top: 0;
-    right: 0;
-  `,
-  wrapperId = 'emoji-popup',
-  onClose = () => {},
+  onClose = () => { },
 }) => {
   const theme = useTheme();
   const styles = getEmojiPickerStyles(theme);
-  const previewConfig = {
-    defaultEmoji: '1f60d',
-    defaultCaption: 'None',
-    showPreview: true,
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const internalHandleEmojiClick = (emojiData, event) => {
+    if (isMountedRef.current) {
+      handleEmojiClick(emojiData, event);
+    }
   };
 
-  return (
-    <Popup
-      positionStyles={positionStyles}
-      wrapperId={wrapperId}
-      onClose={onClose}
-      height="auto"
-      width="auto"
-    >
-      <Box css={styles.emojiPicker}>
-        <EmojiPicker
-          height={400}
-          width={350}
-          onEmojiClick={handleEmojiClick}
-          previewConfig={previewConfig}
-          searchDisabled={false}
-          emojiStyle="facebook"
-          lazyLoadEmojis
-        />
-      </Box>
-    </Popup>
-  );
-};
+  const portalStyles = {
+    position: 'fixed',
+    bottom: '100px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 99999,
+    backgroundColor: '#fff',
+    borderRadius: '12px',
+    boxShadow: '0px 8px 30px rgba(0,0,0,0.2)',
+    border: '1px solid #ebebeb',
+    width: 'min(350px, 90vw)',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  };
+
+  const pickerUI = (
+    <>
+      <div
+        onClick={onClose}
+        style={{ position: 'fixed', inset: 0, zIndex: 99998, background: 'rgba(0,0,0,0.05)' }}
+      />
 
-export default CustomEmojiPicker;
+      <div style={portalStyles}>
+        <Box style={{ padding: 0, margin: 0, border: 'none', display: 'block' }}>
+          <EmojiPicker
+            height={400}
+            width="100%"
+            onEmojiClick={internalHandleEmojiClick}
+            previewConfig={{ showPreview: true, defaultCaption: 'None' }}
+            emojiStyle="facebook"
+            lazyLoadEmojis
+            searchDisabled={false}
+            skinTonesDisabled
+          />
+        </Box>
+      </div>
+    </>
+  );
 
-CustomEmojiPicker.propTypes = {
-  handleEmojiClick: PropTypes.func,
+  return createPortal(pickerUI, document.body);
 };
+
+export default CustomEmojiPicker;

packages/react/src/views/Message/MessageToolbox.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useMemo } from 'react';
+import React, { useState, useContext, useMemo, useRef, useEffect } from 'react';
 import {
   Box,
   Modal,
@@ -76,6 +76,24 @@ export const MessageToolbox = ({
   const [isEmojiOpen, setEmojiOpen] = useState(false);
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const emojiTimeoutRef = useRef(null);
+
+  const handleEmojiClose = () => {
+    if (emojiTimeoutRef.current) {
+      clearTimeout(emojiTimeoutRef.current);
+    }
+    emojiTimeoutRef.current = setTimeout(() => {
+      setEmojiOpen(false);
+    }, 300);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (emojiTimeoutRef.current) {
+        clearTimeout(emojiTimeoutRef.current);
+      }
+    };
+  }, []);
 
   const handleOnClose = () => {
     setShowDeleteModal(false);
@@ -108,10 +126,10 @@ export const MessageToolbox = ({
   const canDeleteMessage = isAllowedToForceDeleteMessage
     ? true
     : isAllowedToDeleteMessage
-    ? true
-    : isAllowedToDeleteOwnMessage
-    ? message.u._id === authenticatedUserId
-    : false;
+      ? true
+      : isAllowedToDeleteOwnMessage
+        ? message.u._id === authenticatedUserId
+        : false;
 
   const options = useMemo(
     () => ({
@@ -132,14 +150,14 @@ export const MessageToolbox = ({
       star: {
         label:
           message.starred &&
-          message.starred.find((u) => u._id === authenticatedUserId)
+            message.starred.find((u) => u._id === authenticatedUserId)
             ? 'Unstar'
             : 'Star',
         id: 'star',
         onClick: () => handleStarMessage(message),
         iconName:
           message.starred &&
-          message.starred.find((u) => u._id === authenticatedUserId)
+            message.starred.find((u) => u._id === authenticatedUserId)
             ? 'star-filled'
             : 'star',
         visible: true,
@@ -268,10 +286,10 @@ export const MessageToolbox = ({
           {isEmojiOpen && (
             <EmojiPicker
               handleEmojiClick={(emoji) => {
-                setEmojiOpen(false);
                 handleEmojiClick(emoji, message, true);
+                handleEmojiClose();
               }}
-              onClose={() => setEmojiOpen(false)}
+              onClose={handleEmojiClose}
               positionStyles={
                 variantStyles.emojiPickerStyles || styles.emojiPickerStyles
               }