close dropdown in teams to prevent z-index bug

[PeerRich]

problem

on https://app.cal.com/settings/teams when clicking

and selecting "disband team" it shows:

solution:

close dropdown when clicking "disband team"

[sairajchouhan]

I tried to fix this issue and arrived at two solutions

• currently the menu is being rendered in a portal and its z-index is 2147483646 if we pass portalled={false} to DropdownMenuContent in TeamListItem.tsx the issue is fixed
• we can change the z-index of the Dialog component to 2147483647 which is one more than the z-index of the portal in which the DropdownMenuContent is being rendered

I tried to fix the zIndex of the Dropdown component but I guess Radix-UI doesn't allow to change it

[sairajchouhan]

Hey, @PeerRich any thoughts on the above approaches?

[PeerRich]

I tried to fix this issue and arrived at two solutions

• currently the menu is being rendered in a portal and its z-index is 2147483646 if we pass portalled={false} to DropdownMenuContent in TeamListItem.tsx the issue is fixed
• we can change the z-index of the Dialog component to 2147483647 which is one more than the z-index of the portal in which the DropdownMenuContent is being rendered

I tried to fix the zIndex of the Dropdown component but I guess Radix-UI doesn't allow to change it

why not close it? if possible we can change z-index but this problem would also be solved by just closing the dropdown

[sairajchouhan]

Ya that would be a better approach

[sairajchouhan]

I guess closing the dropdown is not what we should look for because we are stopping the click propagation at the modal trigger so the menu is not getting closed, even though we clicked the menu item, any feedback on this?

    <DropdownMenuItem>
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button
                            onClick={(e) => {
                              e.stopPropagation();
                            }}
                            color="warn"
                            size="sm"
                            className="w-full rounded-none font-medium"
                            StartIcon={Icon.Trash}>
                            {t("disband_team")}
                          </Button>
                        </DialogTrigger>
                        <ConfirmationDialogContent
                          variety="danger"
                          title={t("disband_team")}
                          confirmBtnText={t("confirm_disband_team")}
                          isLoading={props.isLoading}
                          onConfirm={() => {
                            props.onActionSelect("disband");
                          }}>
                          {t("disband_team_confirmation_message")}
                        </ConfirmationDialogContent>
                      </Dialog>
                    </DropdownMenuItem>

[PeerRich]

would need to see this in action, wanna open a PR?

[sairajchouhan]

Ya sure

[dezerb]

There are currently two solution used in project:

1. dropdown with ConfirmationDialogContent, like this place or remove team member

2. or separate dialog with trigger button in dropdown like

the solution could be to prepare all dropdown like the second one, or add extra div like proposed PR https://github.com/calcom/cal.com/pull/3607

[PeerRich]

I don't know which alternative is better. I wonder how the team behind radix-ui is thinking of this (since both components are from radix)

[dezerb]

@PeerRich I found discussion na radix github page. The solution is pretty straight forward and doesn't duplicate properties for potential new modals https://github.com/radix-ui/primitives/discussions/1436 I updated the PR https://github.com/calcom/cal.com/pull/3607. When it be accepted the same should be done for the "remove member" modal

[PeerRich]

@PeerRich I found discussion na radix github page. The solution is pretty straight forward and doesn't duplicate properties for potential new modals

https://github.com/radix-ui/primitives/discussions/1436

I updated the PR https://github.com/calcom/cal.com/pull/3607. When it be accepted the same should be done for the "remove member" modal

we will review and merge on monday 🙏 thank you

[ivinayakg]

I would want to work on this.

[PeerRich]

go for it!

[PeerRich]

this has been fixed a while ago