refactor: avoid registering mouseleave hiding event for MessageAction…

…s inside MessageSimple.
GetStream · Mar 4, 2022 · c103ed2 · c103ed2
1 parent 1968a1e
commit c103ed2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
 import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
@@ -66,8 +66,6 @@ const MessageSimpleWithContext = <
     ReactionsList = DefaultReactionList,
   } = useComponentContext<StreamChatGenerics>('MessageSimple');
 
-  const messageWrapperRef = useRef<HTMLDivElement | null>(null);
-
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
 
@@ -110,7 +108,6 @@ const MessageSimpleWithContext = <
             ${endOfGroup ? 'str-chat__virtual-message__wrapper--end' : ''}
 					`.trim()}
           key={message.id}
-          ref={messageWrapperRef}
         >
           <MessageStatus />
           {message.user && (
@@ -137,7 +134,7 @@ const MessageSimpleWithContext = <
             }
           >
             <>
-              <MessageOptions messageWrapperRef={messageWrapperRef} />
+              <MessageOptions />
               {hasReactions && !showDetailedReactions && isReactionEnabled && (
                 <ReactionsList reverse />
               )}

diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
@@ -71,7 +71,12 @@ export const MessageActions = <
 
   const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
 
-  const hideOptions = useCallback(() => setActionsBoxOpen(false), []);
+  const hideOptions = useCallback((event: MouseEvent | KeyboardEvent) => {
+    if (event instanceof KeyboardEvent && event.key !== 'Escape') {
+      return;
+    }
+    setActionsBoxOpen(false);
+  }, []);
   const messageActions = getMessageActions();
   const messageDeletedAt = !!message?.deleted_at;
 
@@ -90,8 +95,10 @@ export const MessageActions = <
   useEffect(() => {
     if (actionsBoxOpen) {
       document.addEventListener('click', hideOptions);
+      document.addEventListener('keyup', hideOptions);
     } else {
       document.removeEventListener('click', hideOptions);
+      document.addEventListener('keyup', hideOptions);
     }
 
     return () => document.removeEventListener('click', hideOptions);
@@ -143,7 +150,7 @@ const MessageActionsWrapper: React.FC<MessageActionsWrapperProps> = (props) => {
 
   const onClickOptionsAction = (event: React.BaseSyntheticEvent) => {
     event.stopPropagation();
-    setActionsBoxOpen(true);
+    setActionsBoxOpen((prev) => !prev);
   };
 
   const wrapperProps = {