feat: prevent member 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="focus-visible:outline-none"
+          className="w-full focus-visible:outline-none"
         >
           {children}
         </Menu.Button>

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

@@ -1,24 +1,20 @@
-import { Menu, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import { useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { Menu } from "@headlessui/react";
 import { HiMiniPlus } from "react-icons/hi2";
 
 import Avatar from "~/components/Avatar";
+import CheckboxDropdown from "~/components/CheckboxDropdown";
+import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
-import { formatMemberDisplayName } from "~/utils/helpers";
-import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
 interface MemberSelectorProps {
   cardPublicId: string;
   members: {
-    publicId: string;
-    user: {
-      id: string;
-      name: string | null;
-      image: string | null;
-      email: string | null;
-    };
+    key: string;
+    value: string;
     selected: boolean;
+    leftIcon: React.ReactNode;
+    imageUrl: string | undefined;
   }[];
   isLoading: boolean;
 }
@@ -28,6 +24,8 @@ export default function MemberSelector({
   members,
   isLoading,
 }: MemberSelectorProps) {
+  const router = useRouter();
+  const { openModal } = useModal();
   const utils = api.useUtils();
 
   const refetchCard = () => utils.card.byId.refetch({ cardPublicId });
@@ -38,18 +36,13 @@ export default function MemberSelector({
     },
   });
 
-  const { register, handleSubmit, setValue, watch } = useForm({
-    values: Object.fromEntries(
-      members.map((member) => [member.publicId, member.selected]) ?? [],
-    ),
-  });
-
-  const onSubmit = (values: Record<string, boolean>) => {
-    console.log({ values });
-  };
-
   const selectedMembers = members.filter((member) => member.selected);
 
+  const handleInviteMember = async () => {
+    await router.push(`/members`);
+    openModal("INVITE_MEMBER");
+  };
+
   return (
     <>
       {isLoading ? (
@@ -57,27 +50,28 @@ export default function MemberSelector({
           <div className="h-full w-[125px] 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={members}
+          handleSelect={(_, member) =>
+            addOrRemoveMember.mutate({
+              cardPublicId,
+              workspaceMemberPublicId: member.key,
+            })
+          }
+          handleCreate={handleInviteMember}
+          createNewItemLabel="Invite member"
+          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:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+          <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:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
             {selectedMembers.length ? (
-              <div className="isolate flex -space-x-1 overflow-hidden">
-                {selectedMembers.map((member) => (
-                  <span
-                    key={member.publicId}
-                    className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
-                  >
-                    <span className="text-[10px] font-medium leading-none text-white">
-                      {member.user.name
-                        ? member.user.name
-                            .split(" ")
-                            .map((namePart) => namePart.charAt(0).toUpperCase())
-                            .join("")
-                        : null}
-                    </span>
-                  </span>
+              <div className="isolate flex justify-end -space-x-1 overflow-hidden">
+                {selectedMembers.map(({ value, imageUrl }) => (
+                  <Avatar
+                    size="sm"
+                    name={value}
+                    imageUrl={imageUrl}
+                    email={value}
+                  />
                 ))}
               </div>
             ) : (
@@ -87,77 +81,7 @@ export default function MemberSelector({
               </>
             )}
           </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)}>
-                  {members.map((member) => (
-                    <Menu.Item key={member.publicId}>
-                      {() => (
-                        <div
-                          key={member.publicId}
-                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                          onClick={() => {
-                            const newValue = !watch(member.publicId);
-                            setValue(member.publicId, newValue);
-
-                            addOrRemoveMember.mutate({
-                              cardPublicId,
-                              workspaceMemberPublicId: member.publicId,
-                            });
-
-                            handleSubmit(onSubmit);
-                          }}
-                        >
-                          <input
-                            id={member.publicId}
-                            type="checkbox"
-                            className="h-[14px] w-[14px] rounded bg-transparent"
-                            onClick={(event) => event.stopPropagation()}
-                            {...register(member.publicId)}
-                            checked={watch(member.publicId)}
-                          />
-                          <div className="flex items-center">
-                            <span className="ml-3 flex items-center">
-                              <Avatar
-                                size="xs"
-                                name={member.user.name ?? ""}
-                                imageUrl={
-                                  member.user.image
-                                    ? getPublicUrl(member.user.image)
-                                    : undefined
-                                }
-                                email={member.user.email ?? ""}
-                              />
-                            </span>
-                            <label
-                              htmlFor={member.publicId}
-                              className="ml-3 text-sm"
-                            >
-                              {formatMemberDisplayName(
-                                member.user.name,
-                                member.user.email,
-                              )}
-                            </label>
-                          </div>
-                        </div>
-                      )}
-                    </Menu.Item>
-                  ))}
-                </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 Avatar from "~/components/Avatar";
 import LabelIcon from "~/components/LabelIcon";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
@@ -11,6 +12,8 @@ import { PageHead } from "~/components/PageHead";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
+import { formatMemberDisplayName } from "~/utils/helpers";
+import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 import ActivityList from "./components/ActivityList";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 import { DeleteLabelConfirmation } from "./components/DeleteLabelConfirmation";
@@ -76,9 +79,25 @@ export default function CardPage() {
       );
 
       return {
-        ...member,
-        user: member.user ?? { id: "", name: null },
+        key: member.publicId,
+        value: formatMemberDisplayName(
+          member.user?.name ?? null,
+          member.user?.email ?? null,
+        ),
+        imageUrl: member.user?.image
+          ? getPublicUrl(member.user.image)
+          : undefined,
         selected: isSelected ?? false,
+        leftIcon: (
+          <Avatar
+            size="xs"
+            name={member.user?.name ?? ""}
+            imageUrl={
+              member.user?.image ? getPublicUrl(member.user.image) : undefined
+            }
+            email={member.user?.email ?? ""}
+          />
+        ),
       };
     }) ?? [];