fix: close MessageActionsBox on click inside

GetStream · Sep 9, 2024 · 8d1c98a · 8d1c98a
1 parent af6b94b
commit 8d1c98a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
@@ -103,7 +103,11 @@ export const MessageActions = <
   if (!renderMessageActions) return null;
 
   return (
-    <MessageActionsWrapper customWrapperClass={customWrapperClass} inline={inline}>
+    <MessageActionsWrapper
+      customWrapperClass={customWrapperClass}
+      inline={inline}
+      toggleOpen={dialog?.toggleSingle}
+    >
       <DialogAnchor
         id={dialogId}
         placement={isMine ? 'top-end' : 'top-start'}
@@ -129,7 +133,6 @@ export const MessageActions = <
         aria-label={t('aria/Open Message Actions Menu')}
         className='str-chat__message-actions-box-button'
         data-testid='message-actions-toggle-button'
-        onClick={dialog?.toggleSingle}
         ref={actionsBoxButtonRef}
       >
         <ActionsIcon className='str-chat__message-action-icon' />
@@ -141,10 +144,11 @@ export const MessageActions = <
 export type MessageActionsWrapperProps = {
   customWrapperClass?: string;
   inline?: boolean;
+  toggleOpen?: () => void;
 };
 
 const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperProps>) => {
-  const { children, customWrapperClass, inline } = props;
+  const { children, customWrapperClass, inline, toggleOpen } = props;
 
   const defaultWrapperClass = clsx(
     'str-chat__message-simple__actions__action',
@@ -155,6 +159,7 @@ const MessageActionsWrapper = (props: PropsWithChildren<MessageActionsWrapperPro
   const wrapperProps = {
     className: customWrapperClass || defaultWrapperClass,
     'data-testid': 'message-actions',
+    onClick: toggleOpen,
   };
 
   if (inline) return <span {...wrapperProps}>{children}</span>;

diff --git a/src/components/MessageActions/__tests__/MessageActions.test.js b/src/components/MessageActions/__tests__/MessageActions.test.js
@@ -46,7 +46,7 @@ const messageContextValue = {
 
 const chatClient = getTestClient();
 
-function renderMessageActions(customProps, renderer = render) {
+function renderMessageActions(customProps = {}, renderer = render) {
   return renderer(
     <ChatProvider value={{ client: chatClient }}>
       <DialogsManagerProvider id='dialogs-manager-provider-id'>
@@ -83,14 +83,14 @@ describe('<MessageActions /> component', () => {
         <div
           className="str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options str-chat__message-actions-container"
           data-testid="message-actions"
+          onClick={[Function]}
         >
           <button
             aria-expanded={false}
             aria-haspopup="true"
             aria-label="Open Message Actions Menu"
             className="str-chat__message-actions-box-button"
             data-testid="message-actions-toggle-button"
-            onClick={[Function]}
           >
             <svg
               className="str-chat__message-action-icon"
@@ -231,14 +231,14 @@ describe('<MessageActions /> component', () => {
         <div
           className="custom-wrapper-class"
           data-testid="message-actions"
+          onClick={[Function]}
         >
           <button
             aria-expanded={false}
             aria-haspopup="true"
             aria-label="Open Message Actions Menu"
             className="str-chat__message-actions-box-button"
             data-testid="message-actions-toggle-button"
-            onClick={[Function]}
           >
             <svg
               className="str-chat__message-action-icon"
@@ -281,14 +281,14 @@ describe('<MessageActions /> component', () => {
         <span
           className="str-chat__message-simple__actions__action str-chat__message-simple__actions__action--options str-chat__message-actions-container"
           data-testid="message-actions"
+          onClick={[Function]}
         >
           <button
             aria-expanded={false}
             aria-haspopup="true"
             aria-label="Open Message Actions Menu"
             className="str-chat__message-actions-box-button"
             data-testid="message-actions-toggle-button"
-            onClick={[Function]}
           >
             <svg
               className="str-chat__message-action-icon"