Cannot click on organization switcher when shadcn Sheet is open

Question

Cannot click on organization switcher when shadcn Sheet is open

gunwooterry opened this issue 6 months ago · 4 comments

gunwooterry commented 6 months ago

Preliminary Checks

I have reviewed the documentation: https://clerk.com/docs
I have searched for existing issues: https://github.com/clerk/javascript/issues
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
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 a Sheet 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:

Place OrganizationSwitcher on a shadcn Sheet (https://ui.shadcn.com/docs/components/sheet)
Click on the organization switcher to open the popover
No components on the switcher popover can be clicked

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

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 39.41 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
    Watchman: 2024.06.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @clerk/nextjs: ^5.2.4 => 5.2.4
    @radix-ui/react-dialog: ^1.1.1 => 1.1.1
    @radix-ui/react-slot: ^1.1.0 => 1.1.0
    @types/node: ^20 => 20.14.11
    @types/react: ^18 => 18.3.3
    @types/react-dom: ^18 => 18.3.0
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.1.1 => 2.1.1
    eslint: ^8 => 8.57.0
    eslint-config-next: 14.2.5 => 14.2.5
    lucide-react: ^0.408.0 => 0.408.0
    next: 14.2.5 => 14.2.5
    postcss: ^8 => 8.4.39
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    tailwind-merge: ^2.4.0 => 2.4.0
    tailwindcss: ^3.4.1 => 3.4.6
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5 => 5.5.3

Answer 1 · 2024-08-09T19:22:46.000Z

@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",
      },
    },
  }}
/>

Answer 2 · 2024-09-09T00:01:36.000Z

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! 🙏

Answer 3 · 2024-09-20T00:01:30.000Z

Hello again 👋

After 40 days of no activity, we'll close this issue. Keep in mind, I'm just a robot, so if I've closed this issue in error, please reply here and my human colleagues will reopen it.

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! 🙏

Answer 4 · 2024-11-12T14:31:12.000Z

I face this issue whenever the width reaches mobile dimensions. The organizationSwitcherPopoverRootBox attempt didn't work for me.

I added a <div className="z-1"> which seems to have worked, but I don't recommend the forced override due to other potential UX issues it might cause.