React component client:load doesn't work in some scenarios on iOS safari

RobertBrunhage commented 10 months ago

Astro Info

Astro                    v4.0.8
Node                     v21.4.0
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/tailwind
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

Safari

Describe the Bug

Using the "UI" library https://ui.shadcn.com/ the dropdowns don't work in Astro for iPhone safari.

I tried it on the shadcn website and seems to work there but tried in two different new Astro projects and added the dropdown which doesn't seem to be clickable at all.

In the provided example you can run it with --host and try it on an iPhone with Safari (it does work on safari on a mac)

What's the expected result?

The dropdowns should be clickable on iOS Safari

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uqarw8-hpbyrt?file=README.md

Participation

[ ] I am willing to submit a pull request for this issue.

RobertBrunhage commented 10 months ago

As an additional note

I added another shadui react component in my website which was a "side drawer". That one works and after it has been used the dropdown component works (but not before).

So it seems like some kind of rerender happens after opening the side drawer which makes the dropdown register clicks

lilnasy commented 10 months ago

I was able to reproduce the issue, but I couldn't investigate much. As soon as I open the web inspector, it starts working.

https://github.com/withastro/astro/assets/69170106/54fce8f0-537e-4b80-99c9-1dd1896c2db8

Do you know if it works correctly on iOS when built as an SPA with vite?

RobertBrunhage commented 10 months ago

I don't know regarding SPA and Vite. Don't have that setup.

lilnasy commented 10 months ago

In the video I posted, I was using client:only="react" which means astro's code that renders/hydrates ran corrrectly. From that point on, all code that runs is library and user code. The drop-down showing up eventually means that user code runs correctly as well.

All that points to this being radix-ui/shadcn incompatibility with iOS. I expect this to also be an issue in setups that don't involve astro. Feel free to re-open if you think that is not the case.

withastro / astro