fix: message actions close not working on mweb

100mslive · Jan 25, 2024 · 86e8135 · 86e8135 · vercel · Jan 25, 2024
1 parent 80e3ef3
commit 86e8135
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatActions.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatActions.tsx
@@ -53,7 +53,7 @@ export const ChatActions = ({
   sentByLocalPeer: boolean;
   isMobile: boolean;
   openSheet: boolean;
-  setOpenSheet: (value: boolean) => void;
+  setOpenSheet: (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_hide_message = false, can_block_user = false } = elements?.chat?.real_time_controls || {};
@@ -174,7 +174,7 @@ export const ChatActions = ({
   if (isMobile) {
     return (
       <Sheet.Root open={openSheet} onOpenChange={setOpenSheet}>
-        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={() => setOpenSheet(false)}>
+        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={e => setOpenSheet(false, e)}>
           <Sheet.Title
             css={{
               display: 'flex',
@@ -190,7 +190,7 @@ export const ChatActions = ({
             }}
           >
             Message options
-            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => setOpenSheet(false)}>
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={e => setOpenSheet(false, e)}>
               <CrossIcon />
             </Sheet.Close>
           </Sheet.Title>

diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.tsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.tsx
@@ -189,7 +189,7 @@ const ChatMessage = React.memo(
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
     });
-    const [openSheet, setOpenSheet] = useState(false);
+    const [openSheet, setOpenSheetBare] = useState(false);
     const showPinAction = !!elements?.chat?.allow_pinning_messages;
     const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
     useLayoutEffect(() => {
@@ -198,6 +198,11 @@ const ChatMessage = React.memo(
       }
     }, [index, message.id]);
 
+    const setOpenSheet = (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      e?.stopPropagation();
+      setOpenSheetBare(value);
+    };
+
     return (
       <Box
         css={{
@@ -228,9 +233,9 @@ const ChatMessage = React.memo(
             },
           }}
           data-testid="chat_msg"
-          onClick={() => {
+          onClick={e => {
             if (isMobile) {
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }
           }}
         >
@@ -321,8 +326,7 @@ const ChatMessage = React.memo(
               color: isOverlay ? '#FFF' : '$on_surface_high',
             }}
             onClick={e => {
-              e.stopPropagation();
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }}
           >
             <AnnotisedMessage message={message.message} />