UserButton not compatible with ShadCN sidebar on mobile

Question

UserButton not compatible with ShadCN sidebar on mobile

stargeneration-winston opened this issue 2 months ago · 3 comments

stargeneration-winston commented 2 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://app.replay.io/recording/localhost5173--a18767d4-c6b1-4e6b-b4fb-ffe16b023f83?commentId=&focusWindow=&point=&primaryPanel=&secondaryPanel=console&time=0&viewMode=non-dev

Publishable key

pk_test_Z3JhbmQtZ29vc2UtNTEuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

Place UserButton on shadcn sidebar
Open in mobile and try to use manage account or sign out

Expected behavior:

To be able to view the menus.

Actual behavior:

Sidebar is closed. Even if i delete the invisible layer preventing the click through devtools, it becomes a black screen.

Environment

System:
    OS: macOS 15.0.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 128.20 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.local/share/mise/installs/node/latest/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.3 - ~/.local/share/mise/installs/node/latest/bin/npm
    pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.30 - ~/.local/share/mise/installs/bun/1.1.30/bin/bun
  Browsers:
    Chrome: 130.0.6723.59
    Safari: 18.0.1
  npmPackages:
    @clerk/clerk-react: ^5.5.0 => 5.5.0
    @clerk/themes: ^2.1.27 => 2.1.27
    @eslint/js: ^9.9.0 => 9.9.1
    @hookform/resolvers: ^3.9.0 => 3.9.0
    @radix-ui/react-accordion: ^1.2.0 => 1.2.0
    @radix-ui/react-alert-dialog: ^1.1.1 => 1.1.1
    @radix-ui/react-aspect-ratio: ^1.1.0 => 1.1.0
    @radix-ui/react-avatar: ^1.1.0 => 1.1.0
    @radix-ui/react-checkbox: ^1.1.1 => 1.1.1
    @radix-ui/react-collapsible: ^1.1.0 => 1.1.0
    @radix-ui/react-context-menu: ^2.2.1 => 2.2.1
    @radix-ui/react-dialog: ^1.1.2 => 1.1.2
    @radix-ui/react-dropdown-menu: ^2.1.1 => 2.1.1
    @radix-ui/react-hover-card: ^1.1.1 => 1.1.1
    @radix-ui/react-icons: ^1.3.0 => 1.3.0
    @radix-ui/react-label: ^2.1.0 => 2.1.0
    @radix-ui/react-menubar: ^1.1.1 => 1.1.1
    @radix-ui/react-navigation-menu: ^1.2.0 => 1.2.0
    @radix-ui/react-popover: ^1.1.1 => 1.1.1
    @radix-ui/react-progress: ^1.1.0 => 1.1.0
    @radix-ui/react-radio-group: ^1.2.0 => 1.2.0
    @radix-ui/react-scroll-area: ^1.1.0 => 1.1.0
    @radix-ui/react-select: ^2.1.1 => 2.1.1
    @radix-ui/react-separator: ^1.1.0 => 1.1.0
    @radix-ui/react-slider: ^1.2.0 => 1.2.0
    @radix-ui/react-slot: ^1.1.0 => 1.1.0
    @radix-ui/react-switch: ^1.1.0 => 1.1.0
    @radix-ui/react-tabs: ^1.1.0 => 1.1.0
    @radix-ui/react-toast: ^1.2.1 => 1.2.1
    @radix-ui/react-toggle: ^1.1.0 => 1.1.0
    @radix-ui/react-toggle-group: ^1.1.0 => 1.1.0
    @radix-ui/react-tooltip: ^1.1.3 => 1.1.3
    @radix-ui/themes: ^3.1.3 => 3.1.3
    @tanstack/react-query: ^5.53.3 => 5.53.3
    @types/node: ^22.5.2 => 22.5.2
    @types/react: ^18.3.5 => 18.3.5
    @types/react-dom: ^18.3.0 => 18.3.0
    @vitejs/plugin-react-swc: ^3.5.0 => 3.7.0
    autoprefixer: ^10.4.20 => 10.4.20
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.1.1 => 2.1.1
    cmdk: 1.0.0 => 1.0.0
    date-fns: ^3.6.0 => 3.6.0
    dotenv: ^16.4.5 => 16.4.5
    embla-carousel-react: ^8.2.0 => 8.2.0
    eslint: ^9.9.0 => 9.9.1
    eslint-plugin-react-hooks: ^5.1.0-rc.0 => 5.1.0-rc-fb9a90fa48-20240614
    eslint-plugin-react-refresh: ^0.4.9 => 0.4.11
    globals: ^15.9.0 => 15.9.0
    input-otp: ^1.2.4 => 1.2.4
    lucide-react: ^0.453.0 => 0.453.0
    next-themes: ^0.3.0 => 0.3.0
    postcss: ^8.4.44 => 8.4.44
    react: ^18.3.1 => 18.3.1
    react-day-picker: 8.10.1 => 8.10.1
    react-dom: ^18.3.1 => 18.3.1
    react-hook-form: ^7.53.0 => 7.53.0
    react-resizable-panels: ^2.1.2 => 2.1.2
    react-router-dom: ^6.26.1 => 6.26.1
    recharts: ^2.12.7 => 2.12.7
    rrule: ^2.8.1 => 2.8.1
    sonner: ^1.5.0 => 1.5.0
    tailwind-merge: ^2.5.2 => 2.5.2
    tailwindcss: ^3.4.10 => 3.4.10
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5.5.3 => 5.5.4
    typescript-eslint: ^8.0.1 => 8.3.0
    vaul: ^0.9.1 => 0.9.1
    vite: ^5.4.1 => 5.4.2
    zod: ^3.23.8 => 3.23.8

Answer 1 · 2024-10-21T13:20:43.000Z

Hi 👋

I tried to watch the replay.io reproduction but I got the error Sorry, you don't have permission!

To help us effectively debug the issue you're experiencing, it would be incredibly helpful if you could create a minimal reproduction. This is a simplified example that clearly demonstrates the problem, making it easier for us to identify and address the root cause.

Thanks for using Clerk!

Answer 2 · 2024-10-29T16:48:46.000Z

I have the same issue as well. The options on the userButton menu where the userbutton itself is inside a mobile sidebar, is not clickable. I never opened an issue because our site was not too concerned about mobile users. If the cant log out they cant lol

Answer 3 · 2024-11-11T17:19:06.000Z

Here is a similar reproduction using the sidebar component https://ui.shadcn.com/docs/components/sidebar

Screen.Recording.2024-11-12.at.12.17.12.AM.mov

A way to "fix" this issue is to add the following css. There is probably a better way to fix this but at least this provides a workaround

.cl-organizationSwitcherPopoverRootBox {
  pointer-events: auto;
}

Also connecting the related issue on shadcn shadcn-ui/ui#5462