From fe4dea147464a9c1e369a84741b0577a46c4ab82 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 20 May 2024 11:32:00 +0530
Subject: [PATCH] [WEB-1361] fix: comments access specifier mutation issue.
 (#4515)

---
 .../issue-detail/issue-activity/comments/comment-block.tsx | 5 +++--
 .../issue-detail/issue-activity/comments/comment-card.tsx  | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 1858e6f1a..4b0e2dc0e 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
 import { MessageCircle } from "lucide-react";
 // hooks
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
@@ -12,7 +13,7 @@ type TIssueCommentBlock = {
   children: ReactNode;
 };
 
-export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
+export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
   const { commentId, ends, quickActions, children } = props;
   // hooks
   const {
@@ -63,4 +64,4 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 9aa8139dd..854ee2f87 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -1,4 +1,5 @@
 import { FC, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react";
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/lite-text-editor";
@@ -28,7 +29,7 @@ type TIssueCommentCard = {
   disabled?: boolean;
 };
 
-export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
+export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
   const {
     workspaceSlug,
     projectId,
@@ -90,7 +91,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
       quickActions={
         <>
           {!disabled && currentUser?.id === comment.actor && (
-            <CustomMenu ellipsis>
+            <CustomMenu ellipsis closeOnSelect>
               <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
                 <Pencil className="h-3 w-3" />
                 Edit comment
@@ -196,4 +197,4 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
       </>
     </IssueCommentBlock>
   );
-};
+});