fix: use subtree option in getAnimations
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:
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
I created a new story example (PopoverChildElementAnimationExample) that shows child element animations working properly.
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?
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.