diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx
index 7ee4145c07..aa27f68d12 100644
--- 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
index 13122e5e7b..04677f6564 100644
--- 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,6 +83,7 @@ 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}
@@ -90,7 +91,6 @@ describe('<MessageActions /> component', () => {
             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,6 +231,7 @@ describe('<MessageActions /> component', () => {
         <div
           className="custom-wrapper-class"
           data-testid="message-actions"
+          onClick={[Function]}
         >
           <button
             aria-expanded={false}
@@ -238,7 +239,6 @@ describe('<MessageActions /> component', () => {
             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,6 +281,7 @@ 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}
@@ -288,7 +289,6 @@ describe('<MessageActions /> component', () => {
             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"