react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

fix: use subtree option in getAnimations

Open kp047i opened this issue 7 months ago • 2 comments

Closes #8174

✅ Pull Request Checklist:

  • [x] Included link to corresponding React Spectrum GitHub Issue.
  • [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • [ ] Filled out test instructions.
  • [ ] Updated documentation (if it already exists for this component).
  • [ ] Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

kp047i avatar May 30 '25 15:05 kp047i

Thanks! If you have time, would be awesome if you could add an example to storybook with an exit animation on a child element of the popover so we can verify that it works.

devongovett avatar May 30 '25 16:05 devongovett

@devongovett I created a new story example (PopoverChildElementAnimationExample) that shows child element animations working properly.

kp047i avatar May 31 '25 01:05 kp047i

I was able to fix the Safari issue by using animation.finish() instead of animation.cancel(). But I also noticed that our S2 Account Menu example was broken, because it has animations on its contents that are unrelated to the enter/exit transitions (e.g. a skeleton loader). The popover would just never open because it was waiting for that animation to finish. So idk if this is gonna work after all. Is there some heuristic we can use to determine if an animation is related to entering/exiting or just something unrelated inside the popover?

devongovett avatar Jun 21 '25 01:06 devongovett

Going to close this. There's not a good way to determine which animations on elements inside a popover are related to entry exit animations and which one are independent. We could potentially add some API for that, e.g. a data attribute, a callback prop, etc. For now it's possible to work around this by adding an animation to the popover element itself as well. This can be something invisible such as visibility: hidden with a transition-delay matching the duration of the animations inside.

devongovett avatar Jun 28 '25 02:06 devongovett