Open gunwooterry opened 2 months ago
@gunwooterry we're looking to make improvements here with regards to where these elements get portaled into the dom which is part of the issue your experiencing when using some of the clerk components within dialog components.
A temporary solution would be to add pointer events auto to the organizationSwitcherPopoverRootBox
element.
<OrganizationSwitcher
appearance={{
elements: {
organizationSwitcherPopoverRootBox: {
pointerEvents: "auto",
},
},
}}
/>
Hello 👋
We currently close issues after 40 days of inactivity. It's been 30 days since the last update here. If we missed this issue, please reply here. Otherwise, we'll close this issue in 10 days.
As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.
Thanks for being a part of the Clerk community! 🙏
Preliminary Checks
[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
https://github.com/gunwooterry/clerk-issue-reproduction
Publishable key
pk_test_cmVndWxhci1raXR0ZW4tNjAuY2xlcmsuYWNjb3VudHMuZGV2JA
Description
Clerk's premade component,
OrganizationSwitcher
, should be placed on top of anything. Its z-index is set to 10000. However, when used with aSheet
from shadcn, one of the widely used UI component library, the organization switcher popover cannot be clicked. It's not a simple z-index problem, as it is not blocked by other components visually. There are no other components with a higher z-index than the popover. It also cannot be selected using the Chrome inspector, as shown in the screenshots: There is a deployed example of reproduction -- https://clerk-issue-reproduction.vercel.app/ -- so please refer to it.Steps to reproduce:
OrganizationSwitcher
on a shadcn Sheet (https://ui.shadcn.com/docs/components/sheet)Expected behavior: Components in the popover (e.g. switching organizations, organization settings) should be clicked.
Actual behavior: No click events are delivered to the popover.
Environment