feat: prevent label dropdown from closing after selection

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

@@ -1,20 +1,18 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import { useForm } from "react-hook-form";
-import { HiEllipsisHorizontal, HiMiniPlus } from "react-icons/hi2";
+import { Menu } from "@headlessui/react";
+import { HiMiniPlus } from "react-icons/hi2";
 
 import Badge from "~/components/Badge";
-import LabelIcon from "~/components/LabelIcon";
+import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
 
 interface LabelSelectorProps {
   cardPublicId: string;
   labels: {
-    publicId: string;
-    name: string;
+    key: string;
+    value: string;
     selected: boolean;
-    colourCode: string;
+    leftIcon: React.ReactNode;
   }[];
   isLoading: boolean;
 }
@@ -35,16 +33,6 @@ export default function LabelSelector({
     },
   });
 
-  const { register, handleSubmit, setValue, watch } = useForm({
-    values: Object.fromEntries(
-      labels.map((label) => [label.publicId, label.selected]) ?? [],
-    ),
-  });
-
-  const onSubmit = (values: Record<string, boolean>) => {
-    console.log({ values });
-  };
-
   const selectedLabels = labels.filter((label) => label.selected);
 
   return (
@@ -54,18 +42,21 @@ export default function LabelSelector({
           <div className="h-full w-[175px] 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={labels}
+          handleSelect={(_, label) =>
+            addOrRemoveLabel.mutate({ cardPublicId, labelPublicId: label.key })
+          }
+          handleEdit={(labelPublicId) => openModal("EDIT_LABEL", labelPublicId)}
+          handleCreate={() => openModal("NEW_LABEL")}
+          createNewItemLabel="Create new label"
+          asChild
         >
           {selectedLabels.length ? (
             <div className="flex flex-wrap gap-x-0.5">
               {selectedLabels.map((label) => (
-                <Menu.Button key={label.publicId}>
-                  <Badge
-                    value={label.name}
-                    iconLeft={<LabelIcon colourCode={label.colourCode} />}
-                  />
+                <Menu.Button key={label.key}>
+                  <Badge value={label.value} iconLeft={label.leftIcon} />
                 </Menu.Button>
               ))}
               <Menu.Button>
@@ -78,84 +69,7 @@ export default function LabelSelector({
               Add label
             </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)}>
-                  {labels.map((label) => (
-                    <Menu.Item key={label.publicId}>
-                      {() => (
-                        <div
-                          key={label.publicId}
-                          className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={() => {
-                            const newValue = !watch(label.publicId);
-                            setValue(label.publicId, newValue);
-
-                            addOrRemoveLabel.mutate({
-                              cardPublicId,
-                              labelPublicId: label.publicId,
-                            });
-
-                            handleSubmit(onSubmit);
-                          }}
-                        >
-                          <input
-                            id={label.publicId}
-                            type="checkbox"
-                            className="h-[14px] w-[14px] rounded bg-transparent"
-                            onClick={(event) => event.stopPropagation()}
-                            {...register(label.publicId)}
-                            checked={watch(label.publicId)}
-                          />
-                          <div className="flex w-full items-center justify-between">
-                            <div className="flex items-center">
-                              <span className="ml-3 flex items-center">
-                                <LabelIcon colourCode={label.colourCode} />
-                              </span>
-                              <label
-                                htmlFor={label.publicId}
-                                className="ml-3 text-sm"
-                              >
-                                {label.name}
-                              </label>
-                            </div>
-
-                            <button
-                              className="invisible group-hover:visible"
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                openModal("EDIT_LABEL", label.publicId);
-                              }}
-                            >
-                              <HiEllipsisHorizontal size={20} />
-                            </button>
-                          </div>
-                        </div>
-                      )}
-                    </Menu.Item>
-                  ))}
-                  <button
-                    onClick={() => openModal("NEW_LABEL")}
-                    className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
-                  >
-                    <HiMiniPlus size={22} className="pr-2" />
-                    Create new label
-                  </button>
-                </form>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+        </CheckboxDropdown>
       )}
     </>
   );

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

@@ -4,6 +4,7 @@ import ContentEditable from "react-contenteditable";
 import { useForm } from "react-hook-form";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
+import LabelIcon from "~/components/LabelIcon";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -55,9 +56,10 @@ export default function CardPage() {
       );
 
       return {
-        ...label,
+        key: label.publicId,
+        value: label.name,
         selected: isSelected ?? false,
-        colourCode: label.colourCode ?? "",
+        leftIcon: <LabelIcon colourCode={label.colourCode} />,
       };
     }) ?? [];