ViewTransitions breaking Radix/Shadcn ui Dropdown Functionality in Astro App

[desiboli]

Astro Info

Astro                    v4.6.2
Node                     v20.12.1
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react
                         @astrojs/tailwind

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

📱 IPhone -> chrome & safari

Describe the Bug

After trying to figure out for a long time what could possibly be causing the bug I found out that after removing ViewTransitions from my head the Shadcn/ui dropdown-menu started to work as expected. When using ViewTransitions the dropdown-menu initially work but after navigating in my app (after a view transition) menu dropdown-menu is no longer clickable. Tried this only with the dropdown-menu component so far, but guessing this would effect other kinda similar components making Viewtransitions useless in the app.

What's the expected result?

The dropdown menu should maintain its full functionality and appearance regardless of ViewTransitions implementation.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-yi4ckh

Participation

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

[matthewp]

Please provide a minimal reproduction such as through https://astro.new/latest, not a link to your production website.

[github-actions]

Hello @desiboli. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[desiboli]

@matthewp I added a minimal reproduction (StackBlitz), sorry for the inconvenience!

[martrapp]

Hi @desiboli, I'm a bit lost. When I run you example with <ViewTransitions/> I can select the theme from the drop down, no matter how often i navigate to About and back. What am I doing wrong?

[desiboli]

Hi @martrapp are you testing this on an iPhone with the safari or chrome browser ?
🙏

[martrapp]

Ah, I'm obviously too tired. Thank you for reading your issue to me. IPhone. Now I know what I am doing wrong. Thank you ;-)

[martrapp]

Hi @desiboli, can confirm the issue now. While I'm able to reproduce it, I'm not able to debug it for lack of the necessary equipment.

To me it looks like the UI library looses its touch handlers. After view transitions handlers have to be reestablished as the DOM is changed by the view transition and the former elements from the previous page are gone. Normally, Astro's hydration takes care of this. What puzzles me is the fact that the issue only surfaces on mobile. I'll try to find someone who can help debugging this.