ViewTransitions breaking Radix/Shadcn ui Dropdown Functionality in Astro App

desiboli commented 1 month ago

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 commented 1 month ago

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

github-actions[bot] commented 1 month ago

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 commented 1 month ago

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

martrapp commented 1 month ago

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 commented 1 month ago

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

martrapp commented 1 month ago

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 commented 1 month ago

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.

V3RON commented 2 weeks ago

@martrapp It gets even worse 😄

I connected to my iPhone with a debugger and confirmed that pointerdown listener is not called after transition. I attached a new listener to the <button> element through the console using addEventListener and... both listeners were called!

I will investigate this in more detail after the weekend.

martrapp commented 2 weeks ago

Hi @V3RON thank you so much for stepping in to debug! 💜 Your help is greatly appreciated! 👏🏼

withastro / astro