Radix UI elements not triggering on mobile (specifically iPhones) #7613

shadeemerhi · 2023-10-09T05:55:44Z

shadeemerhi
Oct 9, 2023

Hey everyone,

I'm getting very strange behavior with my Radix UI (shadcd/ui) elements in my production app, but only on iPhone devices. When clicking the trigger buttons of Dialogs, Dropdown Menus, and Select Menus, the elements simply do not open (in both Safari and Chrome on iOS 17.0.2).

The elements behave 100% correctly on desktop, Andriods, as well as in the Chrome Mobile Developer Tools. I even ran the app in the XCode iPhone simulator and the elements are working totally fine there as well. It's strictly on real iPhone devices (both Safari and Chrome).

The two screen recordings below show the broken behaviour from my iPhone and the expected behaviour from the XCode iPhone simulator, respectively:

Broken behaviour from my real iPhone: https://github.com/remix-run/remix/assets/65373763/73e860f5-7fdc-41cc-8bb6-50389ec01173
Expected/working behaviour on XCode iPhone simulator on my MacBook: https://github.com/remix-run/remix/assets/65373763/b7570eb7-c0a0-4f4b-9ca8-53bcae65d26e

This seems like such an obscure issue and I'm not even sure if it's Remix specific, but based on what I've tried it seems to be some SSR/Hydration issue. I've tried using ClientOnly from Sergio's remix-utils package but that doesn't work.

Has anyone seen anything like this before? Any help would be greatly appreciated. Please let me know if any additional information is required.

Here is my root.tsx file that's used in the video above and produces this issue:

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import stylesheet from "~/tailwind.css";
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Input,
  Label,
} from "./components/ui";
import { cn } from "./lib/utils";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

export const meta = () => {
  return [{ title: "Visibull" }];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body className={cn("h-screen text-zinc-800")}>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">Dropdown Menu Trigger</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuSeparator />
            <DropdownMenuItem>GitHub</DropdownMenuItem>
            <DropdownMenuItem>Support</DropdownMenuItem>
            <DropdownMenuItem disabled>API</DropdownMenuItem>
            <DropdownMenuSeparator />
          </DropdownMenuContent>
        </DropdownMenu>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline">Dialog Trigger</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Edit profile</DialogTitle>
              <DialogDescription>
                Make changes to your profile here. Click save when you're done.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="name" className="text-right">
                  Name
                </Label>
                <Input id="name" value="Pedro Duarte" className="col-span-3" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="username" className="text-right">
                  Username
                </Label>
                <Input id="username" value="@peduarte" className="col-span-3" />
              </div>
            </div>
            <DialogFooter>
              <Button type="submit">Save changes</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Package versions:
"@remix-run/dev": "^1.19.1"
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-select": "^1.2.2",

DannyAllegrezza · 2023-11-29T17:11:20Z

DannyAllegrezza
Nov 29, 2023

Hey everyone,

I'm getting very strange behavior with my Radix UI (shadcd/ui) elements in my production app, but only on iPhone devices. When clicking the trigger buttons of Dialogs, Dropdown Menus, and Select Menus, the elements simply do not open (in both Safari and Chrome on iOS 17.0.2).

The elements behave 100% correctly on desktop, Andriods, as well as in the Chrome Mobile Developer Tools. I even ran the app in the XCode iPhone simulator and the elements are working totally fine there as well. It's strictly on real iPhone devices (both Safari and Chrome).

The two screen recordings below show the broken behaviour from my iPhone and the expected behaviour from the XCode iPhone simulator, respectively:

Broken behaviour from my real iPhone: https://github.com/remix-run/remix/assets/65373763/73e860f5-7fdc-41cc-8bb6-50389ec01173

Expected/working behaviour on XCode iPhone simulator on my MacBook: https://github.com/remix-run/remix/assets/65373763/b7570eb7-c0a0-4f4b-9ca8-53bcae65d26e

Hi @shadeemerhi did you ever find a fix for this issue? I've got a project with the same setup (shadcn) and I'm experiencing the same problem on my actual iPhone.

3 replies

shadeemerhi Nov 29, 2023
Author

Hey @DannyAllegrezza,

I found out that this doesn't have anything to do with any of the libraries. The reason was that I was accidentally importing and using a server module in a client component. e.g. if you have some variable/function defined that's intended to be used server-side only (like some util function), and then you try to use it client-side in a React component, it will cause this. I'm not sure why this behavior only occurs on iPhones.

The whole thing is honestly a bit confusing and I can't fully explain it haha but hopefully this helps!

TewodrosWorku Dec 24, 2023

I am also struggling making Radix UI dropdown work in mobile phone. I tried it with Iphone on Chrome and Safari and it doesn't work. I went line by line to make sure no server items are used in client component but it didn't help. I was wondering how you managed to resolve this issue.

albshin Jan 22, 2024

This is a hydration issue with Portals, see radix-ui/primitives#1386 for more details. I also tried using the ClientOnly remix-utils component but that did not fix my issue. I resolved this by installing @headlessui/react and replacing the Radix Portal primitive with HeadlessUI's Portal since it works with SSR out of the box.

Before:

import * as SelectPrimitive from '@radix-ui/react-select';

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
));

New:

import * as SelectPrimitive from '@radix-ui/react-select';
import { Portal } from '@headlessui/react'; // New import

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <Portal> // Use headless UI here
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </Portal>
));

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Radix UI elements not triggering on mobile (specifically iPhones) #7613

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Radix UI elements not triggering on mobile (specifically iPhones) #7613

Uh oh!

Uh oh!

shadeemerhi Oct 9, 2023

Replies: 1 comment · 3 replies

Uh oh!

Uh oh!

DannyAllegrezza Nov 29, 2023

Uh oh!

Uh oh!

shadeemerhi Nov 29, 2023 Author

Uh oh!

TewodrosWorku Dec 24, 2023

Uh oh!

Uh oh!

albshin Jan 22, 2024

shadeemerhi
Oct 9, 2023

Replies: 1 comment 3 replies

DannyAllegrezza
Nov 29, 2023

shadeemerhi Nov 29, 2023
Author