From a8f125cfa825df9655b5c425a084eda1ca33e96e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 31 Mar 2023 03:50:35 +0530
Subject: [PATCH] fix: blocked and blocking in issue details sidebar (#641)

---
 .../issues/sidebar-select/blocked.tsx         | 27 ++++++++++---------
 .../issues/sidebar-select/blocker.tsx         |  5 ++--
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index c704b0e45..62169222a 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -113,17 +113,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         <div className="flex flex-wrap gap-1">
           {watch("blocked_list") && watch("blocked_list").length > 0
             ? watch("blocked_list").map((issue) => (
-                <span
+                <div
                   key={issue}
                   className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-red-50"
-                  onClick={() => {
-                    const updatedBlocked: string[] = watch("blocked_list").filter(
-                      (i) => i !== issue
-                    );
-                    submitChanges({
-                      blocks_list: updatedBlocked,
-                    });
-                  }}
                 >
                   <Link
                     href={`/${workspaceSlug}/projects/${projectId}/issues/${
@@ -137,10 +129,21 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                       }`}
                     </a>
                   </Link>
-                  <span className="opacity-0 duration-300 group-hover:opacity-100">
+                  <button
+                    type="button"
+                    className="opacity-0 duration-300 group-hover:opacity-100"
+                    onClick={() => {
+                      const updatedBlocked: string[] = watch("blocked_list").filter(
+                        (i) => i !== issue
+                      );
+                      submitChanges({
+                        blocks_list: updatedBlocked,
+                      });
+                    }}
+                  >
                     <XMarkIcon className="h-2 w-2" />
-                  </span>
-                </span>
+                  </button>
+                </div>
               ))
             : null}
         </div>
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index 6f7ae1d01..4dc245830 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -129,7 +129,8 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                       }`}
                     </a>
                   </Link>
-                  <span
+                  <button
+                    type="button"
                     className="opacity-0 duration-300 group-hover:opacity-100"
                     onClick={() => {
                       const updatedBlockers: string[] = watch("blockers_list").filter(
@@ -141,7 +142,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                     }}
                   >
                     <XMarkIcon className="h-2 w-2" />
-                  </span>
+                  </button>
                 </div>
               ))
             : null}