fix reply

src/components/HomePage/CentralBar/ChatBar/SendMessage/index.tsx

@@ -15,6 +15,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 import Picker from 'emoji-picker-react';
+import InputAdornment from '@mui/material/InputAdornment';
 
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState,useEffect } from "react";
@@ -137,7 +138,6 @@ const useStyles = makeStyles({
   },
   emoji: {
     position: 'absolute',
-    bottom:'9vh',
     zIndex: 10,
     visibility: 'visible',
   },
@@ -320,6 +320,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
     const [isOpenCaption, setIsOpenCaption] = useState<boolean>(false)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
+    const [isOpenCaptionEmoji, setIsOpenCaptionEmoji] = useState<boolean>(false)
     const [isRecording, setIsRecording] = useState<boolean>(false)
     const [isFilming, setIsFilming] = useState<boolean>(false)
     const [isOpenCamera, setIsOpenCamera] = useState<boolean>(false)
@@ -332,9 +333,15 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
       height: 720,
       facingMode: "user"
     };
-    const onEmojiClick = (_e:any, emojiObject:any) => {
+    const onEmojiClick = (_e: any, emojiObject: any, flag: string) => {
+      if (flag === 'input') {
         setValue(prevValue => prevValue + emojiObject.emoji)
         setIsOpenEmoji(false)
+      }
+      if (flag ==='caption') {
+        setCaption(prevValue => prevValue + emojiObject.emoji)
+        setIsOpenCaptionEmoji(false)
+      }        
     };    
     const clearMessage = () => {
       file && setFile(false)
@@ -348,6 +355,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
       isOpenMenu && setIsOpenMenu(false)
       isOpenEmoji && setIsOpenEmoji(false)
       isOpenCaption && setIsOpenCaption(false)
+      isOpenCaptionEmoji && setIsOpenCaptionEmoji(false)
    }
 
     const sentMessage = async () => {
@@ -433,8 +441,14 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
     const handleCloseFileMenu = (e:any) => e.target.id === 'overlay'&&isOpenMenu&&setIsOpenMenu(false) 
     const handleOpenEmoji = () => !isOpenEmoji && setIsOpenEmoji(true)
     const handleCloseEmoji = (e: any) => e.target.id === 'overlay' && isOpenEmoji && setIsOpenEmoji(false)
+    const handleOpenCaptionEmoji = () => !isOpenEmoji && setIsOpenCaptionEmoji(true)
     const handleOpenCaption = () => !isOpenCaption && setIsOpenCaption(true)
-    const handleCloseCaption = (e: any) => e.target.id === 'overlay' && isOpenCaption && setIsOpenCaption(false)
+    const handleCloseCaption = (e: any) => {
+      if (e.target.id === 'overlay') {
+        if(isOpenCaptionEmoji) return setIsOpenCaptionEmoji(false)
+        isOpenCaption && setIsOpenCaption(false)
+      }
+    } 
     const handleRecording = () => {
         if (isRecording) return stopRecording()
         startRecording()
@@ -480,6 +494,7 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
       setIsOpenMenu(false)
       setIsOpenEmoji(false)
       setIsOpenCaption(false)
+      setIsOpenCaptionEmoji(false)
     }
   }, [isReply])
   console.log(file,'file', status ,'status', _status, '_status')
@@ -548,15 +563,26 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,handleScrollToTheMes
                     '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
-                   <div className={classes.emoji} style={{left: rightIsOpen?'32.5vw':'45vw'}}>
-                      <Picker onEmojiClick={onEmojiClick} />
+                   <div className={classes.emoji} style={{left: rightIsOpen?'32.5vw':'45vw',bottom:'9vh'}}>
+                      <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'input')} />
                    </div>  
                 </div>
                 <div onClick={handleCloseCaption} className={classes.overlay} id='overlay'
                   style={{ display: isOpenCaption ? 'block' : 'none' }}>
+                   {isOpenCaptionEmoji && <div className={classes.emoji}
+                      style={{ left: rightIsOpen ? '32.5vw' : '45vw',bottom:'23vh' }}>
+                      <Picker onEmojiClick={(e,obj) => onEmojiClick(e,obj,'caption')} />
+                   </div>}          
                    <TextField className={classes.captionTextField} onChange={handleTextareaCaption}
                     style={{ left: rightIsOpen ? '32.5vw' : '45vw', top: isReply?'78.5vh':'85vh' }}
-                    placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'/>
+                    placeholder='Caption' value={caption} id="caption" name='caption' variant='outlined'
+                    InputProps={{
+                      startAdornment: (<InputAdornment position="start">
+                        <SentimentSatisfiedAltIcon onClick={handleOpenCaptionEmoji}
+                          sx={{color: isOpenCaptionEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
+                        '&:hover': { color: 'rgb(41, 139, 231)' }}} />
+                    </InputAdornment>
+                  ),}}/>
                 </div>
                 <textarea disabled={file || type === 'recording' || type === 'filming' ? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}