ModeToggle is not working properly on iOS #2130

SoyDiego · 2023-12-19T14:16:09Z

SoyDiego
Dec 19, 2023

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 · 2023-12-20T19:27:58Z

SoyDiego
Dec 20, 2023
Author

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

0 replies

shadcn · 2023-12-21T17:33:44Z

shadcn
Dec 21, 2023
Maintainer

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

0 replies

SoyDiego · 2023-12-21T18:21:01Z

SoyDiego
Dec 21, 2023
Author

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 :)

1 reply

SoyDiego Dec 26, 2023
Author

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 · 2024-01-05T12:33:47Z

nkdem
Jan 5, 2024

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.

1 reply

SoyDiego Jan 5, 2024
Author

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 · 2024-03-16T21:27:03Z

scarlachs
Mar 16, 2024

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?

0 replies

bleeinc · 2024-04-04T20:06:21Z

bleeinc
Apr 4, 2024

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

1 reply

bleeinc Apr 4, 2024

@shadcn any luck reproducing this?

nadjitan · 2024-04-08T14:41:03Z

nadjitan
Apr 8, 2024

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>
  )
}

0 replies

bleeinc · 2024-04-08T16:11:21Z

bleeinc
Apr 8, 2024

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

1 reply

SoyDiego Apr 21, 2024
Author

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 · 2024-04-24T08:25:07Z

desiboli
Apr 24, 2024

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

0 replies

SoyDiego · 2024-04-25T20:00:45Z

SoyDiego
Apr 25, 2024
Author

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 :(

0 replies

bleeinc · 2024-04-26T13:49:01Z

bleeinc
Apr 26, 2024

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.

1 reply

desiboli Apr 26, 2024

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 · 2024-04-27T09:15:34Z

SoyDiego
Apr 27, 2024
Author

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

0 replies

sahandii · 2024-05-24T12:40:26Z

sahandii
May 24, 2024

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.

1 reply

SoyDiego May 24, 2024
Author

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 · 2024-08-25T15:49:46Z

andavb
Aug 25, 2024

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>
  );

1 reply

seafarer Dec 3, 2024

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

Diliradon · 2024-12-13T14:23:20Z

Diliradon
Dec 13, 2024

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

1 reply

Diliradon Dec 13, 2024

@SoyDiego

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ModeToggle is not working properly on iOS #2130

{{title}}

Replies: 15 comments 8 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

ModeToggle is not working properly on iOS #2130

Replies: 15 comments · 8 replies

SoyDiego Dec 20, 2023 Author

shadcn Dec 21, 2023 Maintainer

SoyDiego Dec 21, 2023 Author

SoyDiego Dec 26, 2023 Author

SoyDiego Jan 5, 2024 Author

SoyDiego Apr 21, 2024 Author

SoyDiego Apr 25, 2024 Author

SoyDiego Apr 27, 2024 Author

SoyDiego May 24, 2024 Author

Replies: 15 comments 8 replies

SoyDiego
Dec 20, 2023
Author

shadcn
Dec 21, 2023
Maintainer

SoyDiego
Dec 21, 2023
Author

SoyDiego Dec 26, 2023
Author

SoyDiego Jan 5, 2024
Author

SoyDiego Apr 21, 2024
Author

SoyDiego
Apr 25, 2024
Author

SoyDiego
Apr 27, 2024
Author

SoyDiego May 24, 2024
Author