feat: prevent label dropdown from closing after selection

apps/web/src/components/CheckboxDropdown.tsx

@@ -1,5 +1,6 @@
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
+import { HiEllipsisHorizontal, HiMiniPlus } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 interface Item {
@@ -20,9 +21,12 @@ interface CheckboxDropdownProps {
   children: React.ReactNode;
   items?: Item[];
   groups?: Group[];
+  createNewItemLabel?: string;
   menuSpacing?: "sm" | "md" | "lg";
   position?: "left" | "right";
   handleSelect: (groupKey: string | null, item: { key: string }) => void;
+  handleEdit?: (key: string) => void;
+  handleCreate?: () => void;
   asChild?: boolean;
 }
 
@@ -30,9 +34,12 @@ export default function CheckboxDropdown({
   children,
   items,
   groups,
+  createNewItemLabel = "Create new",
   menuSpacing = "sm",
   position = "left",
   handleSelect,
+  handleEdit,
+  handleCreate,
   asChild = true,
 }: CheckboxDropdownProps) {
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
@@ -43,6 +50,61 @@ export default function CheckboxDropdown({
     lg: "top-[38px]",
   };
 
+  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 });
+            }}
+          >
+            <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 })}
+              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"
+            >
+              {item.value}
+            </label>
+            {handleEdit && (
+              <button
+                className="invisible ml-auto group-hover:visible"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleEdit(item.key);
+                }}
+              >
+                <HiEllipsisHorizontal size={20} />
+              </button>
+            )}
+          </div>
+        </Menu.Item>
+      ))}
+      {handleCreate && (
+        <button
+          className="flex w-full items-center rounded-[5px] p-2 px-2 text-[12px] hover:bg-light-200 dark:hover:bg-dark-300"
+          onClick={() => handleCreate()}
+        >
+          <HiMiniPlus size={20} className="pr-1.5" />
+          {createNewItemLabel}
+        </button>
+      )}
+    </>
+  );
+
   return (
     <Menu
       as="div"
@@ -76,38 +138,8 @@ export default function CheckboxDropdown({
             <div className="p-1">
               {!selectedGroup ? (
                 <>
-                  {items?.map((item) => (
-                    <Menu.Item key={item.key}>
-                      <div
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleSelect(null, { key: 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(null, { key: item.key })}
-                          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"
-                        >
-                          {item.value}
-                        </label>
-                      </div>
-                    </Menu.Item>
-                  ))}
+                  {items && renderMenuItems(items, null)}
+
                   {groups?.map((group) => (
                     <Menu.Item key={group.key}>
                       <div
@@ -127,42 +159,11 @@ export default function CheckboxDropdown({
                 </>
               ) : (
                 <>
-                  {groups
-                    ?.find((g) => g.key === selectedGroup)
-                    ?.items.map((item) => (
-                      <Menu.Item key={item.key}>
-                        <div
-                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleSelect(selectedGroup, { key: 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(selectedGroup, { key: item.key })
-                            }
-                            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"
-                          >
-                            {item.value}
-                          </label>
-                        </div>
-                      </Menu.Item>
-                    ))}
+                  {groups?.find((g) => g.key === selectedGroup)?.items &&
+                    renderMenuItems(
+                      groups.find((g) => g.key === selectedGroup)?.items || [],
+                      selectedGroup,
+                    )}
                 </>
               )}
             </div>

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} />,
       };
     }) ?? [];