ModeToggle is not working properly on iOS

[SoyDiego]

I will write here the same I wrote in #2129.

Hi. I'm using Astro and I have implemeted the dark mode.
All is working perfectly in web / Android but on iOS (real device) when I'm touching the button is not displaying the menu to choose the theme.

I realized if you hold two times the button, the menu appears and start working. It's weird.
You can check it in my website https://www.soydiego.com.ar but remember, the problem is with iOS Phones (no with developer tools)

My code is exactly like the website:

import * as React from "react"
import { Moon, Sun } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
export function ModeToggle() {
  const [theme, setThemeState] = React.useState<
    "theme-light" | "dark" | "system"
  >("theme-light")
 
  React.useEffect(() => {
    const isDarkMode = document.documentElement.classList.contains("dark")
    setThemeState(isDarkMode ? "dark" : "theme-light")
  }, [])
 
  React.useEffect(() => {
    const isDark =
      theme === "dark" ||
      (theme === "system" &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    document.documentElement.classList[isDark ? "add" : "remove"]("dark")
  }, [theme])
 
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setThemeState("theme-light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setThemeState("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setThemeState("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Anyone with same problem?

[SoyDiego]

I hope you can check it or give a opinion @shadcn.
I opened a issue here: #2129.

[shadcn]

Do you have a link I can check out to debug?

[SoyDiego]

Do you have a link I can check out to debug?

Thanks for reply @shadcn. I don't have a example, but I following exactly all the docs of your website.
https://ui.shadcn.com/docs/dark-mode/astro. I didn't change anything.

The problem is happening only on iOS devices. If you have a iOS device you can check here https://www.soydiego.com.ar and here you have a video from a iPhone:

problem.mp4

If I can do something more, let me know.
Thanks for trying to help :)

[SoyDiego]

Hi @shadcn again and merry Christmas. Could you help me with this issue? I'm not expecting you resolve it but if you can guide me or give me a idea where I need to take a look, I can do the PR.

Thanks again for your time and sorry if I'm disturbing you 😊

[nkdem]

Having this issue on my website too, and it appears I'm having the same issue as you:
After my friend said the toggle doesn't work for them on Mobile (they have an iOS device), I noticed it does not work on all browsers on Android either. It works with Chromium browsers but not firefox on Android.

[SoyDiego]

Thanks for check. I downloaded Firefox in my Android phone and works perfectly.
I don't know what version are you using, but I have the latest version of Firefox and works good.
My problem like you said before is in iOS :(

I hope @shadcn can read here again

[scarlachs]

For me it also does not work on iOS (17.4). Android I can't test and haven't asked a friend or else. Maybe I'll ask in the future.
Also deleted the toggle and installed it again, direct from the docs with no modification. No chance to have it working. Will try another solution for now.

Confusingly the Toggle on ui.shadcn.com does work properly on iOS, but maybe because it's not an Astro App?

[bleeinc]

I'm in the same boat, not working on iOS at all, very weird. (Im using Select and seeing the same behavior)

[bleeinc]

@shadcn any luck reproducing this?

[nadjitan]

For now I opted in using Headless UI's component just to support dropdown in iPhones. Link here for docs

Simple example:

import { Menu, Transition } from '@headlessui/react'
import { Fragment } from 'react'

const links = [
  { href: '/link-1', label: 'Link 1' },
  { href: '/link-2', label: 'Link 2' },
  { href: '/link-3', label: 'Link 3' },
]

export function DropdownSample() {
  return (
    <Menu as="div" className="relative inline-block">
      <Menu.Button className="inline-flex w-full justify-center rounded-md px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75">
        Sample Links
      </Menu.Button>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
        <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right overflow-hidden rounded-md bg-white shadow-lg focus:outline-none">
          {links.map((link) => (
            <Menu.Item key={link.href} as={Fragment}>
              <a href={link.href} className={'flex w-full px-4 py-2'}>
                {link.label}
              </a>
            </Menu.Item>
          ))}
        </Menu.Items>
      </Transition>
    </Menu>
  )
}

[bleeinc]

For anyone that needs it.

I dug into the underlying issue on Radix as it's component has the same issue.

By applying translate-y-0 translate-x-0 classes to the select trigger I was able to get it to perform as expected on iOS

[SoyDiego]

Hi @bleeinc, could you guide me and give me more information about how to solve it?

And also maybe we can make a pull request in Radix if your solution works.
I cannot understand how is not more people complaining about this problem.

Thanks for your help!

[desiboli]

Hi!
I'm experiencing the same problem in my Astro app https://www.taffo.dev/.
I can only reproduce the bug in IOS using chrome and/or Safari.
After some investigation I found out that removing Astro ViewTransitions from my head, the dropdown-menu worked fine again. But I kinda want to keep the ViewTransitions for the nice animations between pages. I assume @SoyDiego your'e using ViewTransition too right ? @bleeinc Where you using ViewTransitions too ?

So this bug has probably nothing to do with Shadcn nor Radix...

I created a bug ticket in astro:
withastro/astro#10863

[SoyDiego]

Hi! I'm experiencing the same problem in my Astro app https://www.taffo.dev/. I can only reproduce the bug in IOS using chrome and/or Safari. After some investigation I found out that removing Astro ViewTransitions from my head, the dropdown-menu worked fine again. But I kinda want to keep the ViewTransitions for the nice animations between pages. I assume @SoyDiego your'e using ViewTransition too right ? @bleeinc Where you using ViewTransitions too ?

So this bug has probably nothing to do with Shadcn nor Radix...

I created a bug ticket in astro: withastro/astro#10863

Hi, sorry for the delay. No, i'm not using ViewTransitions and I couldn't fix it yet :(

[bleeinc]

I'm not using view transitions, but i've verified my fix works across all use cases on iOS with dropdowns and you can update your component locally until someone submits a PR to fix it holistically.

In select.jsx it's as easy as adding the translate classes to the className, the same fix would work on other components that are having the issue on iOS i suspect due to some css translation race conditions. Probably need to investigate the particular reason behind how iOS treats this differently but for now this gets us up and running.

[desiboli]

My issue is with the Dropdown-Menu component, I guess @SoyDiego issue is with the dropdown-menu as well, right ? I tried anyway to add translate-y-0 translate-x-0 to the dropdown menu trigger, but still same issue. It's weird anyway, when I remove Viewtransitions - 'astro:transitions' the dropdown menu work as usual.... 🤷‍♂️

[SoyDiego]

My issue is with the Dropdown-Menu component, I guess @SoyDiego issue is with the dropdown-menu as well, right ? I tried anyway to add translate-y-0 translate-x-0 to the dropdown menu trigger, but still same issue. It's weird anyway, when I remove Viewtransitions - 'astro:transitions' the dropdown menu work as usual.... 🤷‍♂️

Exactly I'm using dropdown-menu.tsx and I tried to add your suggestion @bleeinc but is not working for me.
@shadcn will you have continue ignoring this issue?. Since december 2023 I reported it and also I created a issue that you closed it #2129. Please, now more people have the same problem.

Thanks!!

[sahandii]

Hi guys, I have the EXACT same problem with my project. I can't trigger tooltips + dropdown menus. (iOS safari/chrome).

So weird. And the translate-y-0 + translate-x-0 classes didn't work either for me.

[SoyDiego]

Hi guys, I have the EXACT same problem with my project. I can't trigger tooltips + dropdown menus. (iOS safari/chrome).

So weird. And the translate-y-0 + translate-x-0 classes didn't work either for me.

We are in the same boat and no solution since December 21, 2023

[andavb]

I found a simple workaround that works well in my case.

  const [dropdownOpen, setDropdownOpen] = React.useState(false);
  
  return (
      <DropdownMenu
        open={dropdownOpen}
        onOpenChange={(val) => setDropdownOpen(val)}
      >
        <DropdownMenuTrigger
          onClick={() => {
            setDropdownOpen((val) => !val);
          }}
        >
          trigger
        </DropdownMenuTrigger>
        <DropdownMenuContent>hi</DropdownMenuContent>
      </DropdownMenu>
  );

[seafarer]

The only one of these solutions that worked for me on iOS 17. Thanks

[mwargan]

I found a simple workaround that works well in my case.

  const [dropdownOpen, setDropdownOpen] = React.useState(false);
  
  return (
      <DropdownMenu
        open={dropdownOpen}
        onOpenChange={(val) => setDropdownOpen(val)}
      >
        <DropdownMenuTrigger
          onClick={() => {
            setDropdownOpen((val) => !val);
          }}
        >
          trigger
        </DropdownMenuTrigger>
        <DropdownMenuContent>hi</DropdownMenuContent>
      </DropdownMenu>
  );

In addition to this fix, I have found that switching out the Portal also works, as described here: remix-run/remix#7613 (reply in thread)

[mwargan]

I found a simple workaround that works well in my case.

  const [dropdownOpen, setDropdownOpen] = React.useState(false);
  
  return (
      <DropdownMenu
        open={dropdownOpen}
        onOpenChange={(val) => setDropdownOpen(val)}
      >
        <DropdownMenuTrigger
          onClick={() => {
            setDropdownOpen((val) => !val);
          }}
        >
          trigger
        </DropdownMenuTrigger>
        <DropdownMenuContent>hi</DropdownMenuContent>
      </DropdownMenu>
  );

In addition to this fix, I have found that switching out the Portal also works, as described here: remix-run/remix#7613 (reply in thread)

Welp actually turns out not really. It helped in dev mode, but when I built the static Astro site, same problem...

[Diliradon]

Try to manipulate style just add: data-[state=off]:bg-transparent data-[state=off]:text-black for example

[Diliradon]

@SoyDiego