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

@@ -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>

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) => {

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("");