fix: prevent card side menu selectors from closing unexpectedly (#174)

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>
       )}
     </>