From c2ccb6b13bd6d5147028c603f1738503dab41ac4 Mon Sep 17 00:00:00 2001
From: Henry <30578846+hjball@users.noreply.github.com>
Date: Thu, 11 Sep 2025 22:48:53 +0100
Subject: [PATCH] fix: prevent card side menu selectors from closing
 unexpectedly (#174)

---
 .../views/card/components/LabelSelector.tsx    | 18 +++++++-----------
 .../src/views/card/components/ListSelector.tsx |  5 ++---
 .../views/card/components/MemberSelector.tsx   |  6 +++---
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/views/card/components/LabelSelector.tsx b/apps/web/src/views/card/components/LabelSelector.tsx
index 421efd77..116a895b 100644
--- a/apps/web/src/views/card/components/LabelSelector.tsx
+++ b/apps/web/src/views/card/components/LabelSelector.tsx
@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -101,22 +100,19 @@ export default function LabelSelector({
           {selectedLabels.length ? (
             <div className="flex flex-wrap gap-x-0.5">
               {selectedLabels.map((label) => (
-                <Menu.Button key={label.key}>
-                  <Badge value={label.value} iconLeft={label.leftIcon} />
-                </Menu.Button>
-              ))}
-              <Menu.Button>
                 <Badge
-                  value={t`Add label`}
-                  iconLeft={<HiMiniPlus size={14} />}
+                  key={label.key}
+                  value={label.value}
+                  iconLeft={label.leftIcon}
                 />
-              </Menu.Button>
+              ))}
+              <Badge value={t`Add label`} iconLeft={<HiMiniPlus size={14} />} />
             </div>
           ) : (
-            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+            <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
               <HiMiniPlus size={22} className="pr-2" />
               {t`Add label`}
-            </Menu.Button>
+            </div>
           )}
         </CheckboxDropdown>
       )}
diff --git a/apps/web/src/views/card/components/ListSelector.tsx b/apps/web/src/views/card/components/ListSelector.tsx
index 5fe74b9f..085b096e 100644
--- a/apps/web/src/views/card/components/ListSelector.tsx
+++ b/apps/web/src/views/card/components/ListSelector.tsx
@@ -1,4 +1,3 @@
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 
 import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -79,9 +78,9 @@ export default function ListSelector({
           }}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedList?.value}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>
diff --git a/apps/web/src/views/card/components/MemberSelector.tsx b/apps/web/src/views/card/components/MemberSelector.tsx
index 0d9b1f59..eb445a26 100644
--- a/apps/web/src/views/card/components/MemberSelector.tsx
+++ b/apps/web/src/views/card/components/MemberSelector.tsx
@@ -1,5 +1,4 @@
 import { useRouter } from "next/router";
-import { Menu } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import { HiMiniPlus } from "react-icons/hi2";
 
@@ -112,11 +111,12 @@ export default function MemberSelector({
           createNewItemLabel={t`Invite member`}
           asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
+          <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-50 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-200 dark:border-dark-50 dark:text-dark-1000 dark:hover:border-dark-200 dark:hover:bg-dark-100">
             {selectedMembers.length ? (
               <div className="isolate flex justify-end -space-x-1 overflow-hidden">
                 {selectedMembers.map(({ value, imageUrl }) => (
                   <Avatar
+                    key={value}
                     size="sm"
                     name={value}
                     imageUrl={imageUrl}
@@ -130,7 +130,7 @@ export default function MemberSelector({
                 {t`Add member`}
               </>
             )}
-          </Menu.Button>
+          </div>
         </CheckboxDropdown>
       )}
     </>