From eb0ca9c738fa7004e22058eec641b2f7b96ff029 Mon Sep 17 00:00:00 2001
From: Ridham Khandar <ridhamk.j@gmail.com>
Date: Fri, 22 Aug 2025 21:08:39 +0530
Subject: [PATCH] fix: delay clearing modal content until fade-out on public
 board (#151)

* fix: closing the modal on the public board page clears the content before the modal fade out animation finishes

* refactor: enhance CheckboxDropdown component to handle empty states and improve item rendering

* Update apps/web/src/views/public/board/CardModal.tsx

Co-authored-by: Henry <30578846+hjball@users.noreply.github.com>

---------

Co-authored-by: Henry <30578846+hjball@users.noreply.github.com>
---
 apps/web/src/components/CheckboxDropdown.tsx  | 92 ++++++++++---------
 apps/web/src/views/public/board/CardModal.tsx | 25 ++---
 2 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/apps/web/src/components/CheckboxDropdown.tsx b/apps/web/src/components/CheckboxDropdown.tsx
index f245be61..d4e18525 100644
--- a/apps/web/src/components/CheckboxDropdown.tsx
+++ b/apps/web/src/components/CheckboxDropdown.tsx
@@ -55,51 +55,59 @@ export default function CheckboxDropdown({
 
   const renderMenuItems = (items: Item[], groupKey: string | null) => (
     <>
-      {items.map((item) => (
-        <Menu.Item key={item.key}>
-          <div
-            className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-            onClick={(e) => {
-              e.preventDefault();
-              handleSelect(groupKey, { key: item.key, value: item.value });
-            }}
-          >
-            <input
-              id={item.key}
-              name={item.key}
-              type="checkbox"
-              className="h-[14px] w-[14px] rounded bg-transparent"
-              onClick={(event) => event.stopPropagation()}
-              onChange={() =>
-                handleSelect(groupKey, { key: item.key, value: item.value })
-              }
-              checked={item.selected}
-            />
-            {item.leftIcon && (
-              <span className="ml-3 flex items-center">{item.leftIcon}</span>
-            )}
-            <label
-              htmlFor={item.key}
-              className="ml-3 text-[12px] text-dark-900"
+      {items.length > 0 ? (
+        items.map((item) => (
+          <Menu.Item key={item.key}>
+            <div
+              className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+              onClick={(e) => {
+                e.preventDefault();
+                handleSelect(groupKey, { key: item.key, value: item.value });
+              }}
             >
-              {item.value}
-            </label>
-            {handleEdit && (
-              <button
-                type="button"
-                className="invisible ml-auto group-hover:visible"
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  handleEdit(item.key);
-                }}
+              <input
+                id={item.key}
+                name={item.key}
+                type="checkbox"
+                className="h-[14px] w-[14px] rounded bg-transparent"
+                onClick={(event) => event.stopPropagation()}
+                onChange={() =>
+                  handleSelect(groupKey, { key: item.key, value: item.value })
+                }
+                checked={item.selected}
+              />
+              {item.leftIcon && (
+                <span className="ml-3 flex items-center">{item.leftIcon}</span>
+              )}
+              <label
+                htmlFor={item.key}
+                className="ml-3 text-[12px] text-dark-900"
               >
-                <HiEllipsisHorizontal size={20} className="text-dark-900" />
-              </button>
-            )}
+                {item.value}
+              </label>
+              {handleEdit && (
+                <button
+                  type="button"
+                  className="invisible ml-auto group-hover:visible"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleEdit(item.key);
+                  }}
+                >
+                  <HiEllipsisHorizontal size={20} className="text-dark-900" />
+                </button>
+              )}
+            </div>
+          </Menu.Item>
+        ))
+      ) : (
+        !handleCreate && (
+          <div className="flex items-center p-2 text-[12px] text-dark-900">
+            No items
           </div>
-        </Menu.Item>
-      ))}
+        )
+      )}
       {handleCreate && (
         <button
           type="button"
diff --git a/apps/web/src/views/public/board/CardModal.tsx b/apps/web/src/views/public/board/CardModal.tsx
index 9ed7fbba..f6fa3f80 100644
--- a/apps/web/src/views/public/board/CardModal.tsx
+++ b/apps/web/src/views/public/board/CardModal.tsx
@@ -69,17 +69,20 @@ export function CardModal({
                 onClick={async (e) => {
                   e.preventDefault();
                   closeModal();
-                  try {
-                    await router.replace(
-                      `/${workspaceSlug}/${boardSlug}`,
-                      undefined,
-                      {
-                        shallow: true,
-                      },
-                    );
-                  } catch (error) {
-                    console.error(error);
-                  }
+
+                  setTimeout(async () => {
+                    try {
+                      await router.replace(
+                        `/${workspaceSlug}/${boardSlug}`,
+                        undefined,
+                        {
+                          shallow: true,
+                        },
+                      );
+                    } catch (error) {
+                      console.error(error);
+                    }
+                  }, 400);
                 }}
               >
                 <HiXMark