feat: prevent list dropdown from closing after selection

apps/web/src/components/CheckboxDropdown.tsx

@@ -113,7 +113,7 @@ export default function CheckboxDropdown({
       <>
         <Menu.Button
           as={asChild ? "div" : undefined}
-          className="w-full focus-visible:outline-none"
+          className="h-full w-full focus-visible:outline-none"
         >
           {children}
         </Menu.Button>

apps/web/src/views/card/components/Dropdown.tsx

@@ -1,44 +1,22 @@
-import { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { HiEllipsisHorizontal, HiOutlineTrash } from "react-icons/hi2";
+
+import Dropdown from "~/components/Dropdown";
 import { useModal } from "~/providers/modal";
 
-export default function Dropdown() {
+export default function BoardDropdown() {
   const { openModal } = useModal();
 
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200">
-          <HiEllipsisHorizontal
-            size={25}
-            className="text-light-900 dark:text-dark-900"
-          />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
-          <div className="flex">
-            <Menu.Item>
-              <button
-                onClick={() => openModal("DELETE_CARD")}
-                className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
-              >
-                Delete card
-              </button>
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <Dropdown
+      items={[
+        {
+          label: "Delete card",
+          action: () => openModal("DELETE_CARD"),
+          icon: <HiOutlineTrash className="h-[16px] w-[16px] text-dark-900" />,
+        },
+      ]}
+    >
+      <HiEllipsisHorizontal className="h-6 w-6 text-dark-900" />
+    </Dropdown>
   );
 }

apps/web/src/views/card/components/ListSelector.tsx

@@ -1,13 +1,13 @@
-import { Fragment } from "react";
+import { Menu } from "@headlessui/react";
+
+import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { api } from "~/utils/api";
-import { Menu, Transition } from "@headlessui/react";
-import { useForm } from "react-hook-form";
 
 interface ListSelectorProps {
   cardPublicId: string;
   lists: {
-    publicId: string;
-    name: string;
+    key: string;
+    value: string;
     selected: boolean;
   }[];
   isLoading: boolean;
@@ -28,16 +28,6 @@ export default function ListSelector({
     },
   });
 
-  const { register, handleSubmit, setValue, watch } = useForm({
-    values: Object.fromEntries(
-      lists?.map((list) => [list.publicId, list.selected]) ?? [],
-    ),
-  });
-
-  const onSubmit = (values: Record<string, boolean>) => {
-    console.log({ values });
-  };
-
   const selectedList = lists.find((list) => list.selected);
 
   return (
@@ -47,67 +37,20 @@ export default function ListSelector({
           <div className="h-full w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
         </div>
       ) : (
-        <Menu
-          as="div"
-          className="relative flex w-full flex-wrap items-center text-left"
+        <CheckboxDropdown
+          items={lists}
+          handleSelect={(_, member) =>
+            updateCardList.mutate({
+              cardPublicId,
+              newListPublicId: member.key,
+            })
+          }
+          asChild
         >
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
-            {selectedList?.name}
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 py-1 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+            {selectedList?.value}
           </Menu.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
-              <div className="p-2">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  {lists?.map((list) => (
-                    <Menu.Item key={list.publicId}>
-                      {() => (
-                        <div
-                          key={list.publicId}
-                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={() => {
-                            const newValue = !watch(list.publicId);
-                            setValue(list.publicId, newValue);
-
-                            updateCardList.mutate({
-                              cardPublicId,
-                              newListPublicId: list.publicId,
-                            });
-
-                            handleSubmit(onSubmit);
-                          }}
-                        >
-                          <input
-                            id={list.publicId}
-                            type="checkbox"
-                            className="h-[14px] w-[14px] rounded bg-transparent"
-                            onClick={(event) => event.stopPropagation()}
-                            {...register(list.publicId)}
-                            checked={watch(list.publicId)}
-                          />
-                          <label
-                            htmlFor={list.publicId}
-                            className="ml-3 text-sm"
-                          >
-                            {list.name}
-                          </label>
-                        </div>
-                      )}
-                    </Menu.Item>
-                  ))}
-                </form>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+        </CheckboxDropdown>
       )}
     </>
   );

apps/web/src/views/card/index.tsx

@@ -68,7 +68,8 @@ export default function CardPage() {
 
   const formattedLists =
     board?.lists.map((list) => ({
-      ...list,
+      key: list.publicId,
+      value: list.name,
       selected: list.publicId === data?.list?.publicId,
     })) ?? [];