From d6fd9b5df3fa661ccc6f2cf4a88f59592c1195b3 Mon Sep 17 00:00:00 2001
From: Adam Garbowski <dezerb@gmail.com>
Date: Sun, 31 Jul 2022 21:48:17 +0200
Subject: [PATCH] Hide dropdown under modal dialog (#3607)

Co-authored-by: Adam Garbowski <adamgarbowski90@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/team/TeamList.tsx     | 6 ++++++
 apps/web/components/team/TeamListItem.tsx | 9 +++++++--
 apps/web/pages/settings/teams/index.tsx   | 2 --
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/team/TeamList.tsx b/apps/web/components/team/TeamList.tsx
index fdb9466f72..a38edfb4f6 100644
--- a/apps/web/components/team/TeamList.tsx
+++ b/apps/web/components/team/TeamList.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 
@@ -10,6 +12,8 @@ interface Props {
 export default function TeamList(props: Props) {
   const utils = trpc.useContext();
 
+  const [hideDropdown, setHideDropdown] = useState(false);
+
   function selectAction(action: string, teamId: number) {
     switch (action) {
       case "disband":
@@ -40,6 +44,8 @@ export default function TeamList(props: Props) {
             team={team}
             onActionSelect={(action: string) => selectAction(action, team?.id as number)}
             isLoading={deleteTeamMutation.isLoading}
+            hideDropdown={hideDropdown}
+            setHideDropdown={setHideDropdown}
           />
         ))}
       </ul>
diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx
index ec5bd393d2..6187abdbe5 100644
--- a/apps/web/components/team/TeamListItem.tsx
+++ b/apps/web/components/team/TeamListItem.tsx
@@ -27,6 +27,8 @@ interface Props {
   key: number;
   onActionSelect: (text: string) => void;
   isLoading?: boolean;
+  hideDropdown: boolean;
+  setHideDropdown: (value: boolean) => void;
 }
 
 export default function TeamListItem(props: Props) {
@@ -39,18 +41,21 @@ export default function TeamListItem(props: Props) {
       utils.invalidateQueries(["viewer.teams.list"]);
     },
   });
+
   function acceptOrLeave(accept: boolean) {
     acceptOrLeaveMutation.mutate({
       teamId: team?.id as number,
       accept,
     });
   }
+
   const acceptInvite = () => acceptOrLeave(true);
   const declineInvite = () => acceptOrLeave(false);
 
   const isOwner = props.team.role === MembershipRole.OWNER;
   const isInvitee = !props.team.accepted;
   const isAdmin = props.team.role === MembershipRole.OWNER || props.team.role === MembershipRole.ADMIN;
+  const { hideDropdown, setHideDropdown } = props;
 
   if (!team) return <></>;
 
@@ -150,7 +155,7 @@ export default function TeamListItem(props: Props) {
                 <DropdownMenuTrigger asChild>
                   <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
                 </DropdownMenuTrigger>
-                <DropdownMenuContent>
+                <DropdownMenuContent hidden={hideDropdown}>
                   {isAdmin && (
                     <DropdownMenuItem>
                       <Link href={"/settings/teams/" + team.id}>
@@ -182,7 +187,7 @@ export default function TeamListItem(props: Props) {
                   <DropdownMenuSeparator className="h-px bg-gray-200" />
                   {isOwner && (
                     <DropdownMenuItem>
-                      <Dialog>
+                      <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
                         <DialogTrigger asChild>
                           <Button
                             onClick={(e) => {
diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx
index a2098f2010..6af40f956d 100644
--- a/apps/web/pages/settings/teams/index.tsx
+++ b/apps/web/pages/settings/teams/index.tsx
@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
 import { useState } from "react";
 
@@ -19,7 +18,6 @@ import TeamList from "@components/team/TeamList";
 
 function Teams() {
   const { t } = useLocale();
-  const { status } = useSession();
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");