Skip to content

fix: use subtree option in getAnimations #8325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

kp047i
Copy link
Contributor

@kp047i kp047i commented May 30, 2025

Closes #8174

✅ Pull Request Checklist:

  • 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:

@devongovett
Copy link
Member

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.

@kp047i
Copy link
Contributor Author

kp047i commented May 31, 2025

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

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like both entering and exiting are working as expected in Chrome and FF.
In Safari, only exiting is working as expected.

}}>
<style>
{`
.react-aria-Popover[data-exiting] .content,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes the issue for Safari from what I can tell.

Suggested change
.react-aria-Popover[data-exiting] .content,
@starting-style {
.react-aria-Popover .content {
opacity: 0;
}
}
.react-aria-Popover[data-exiting] .content,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@snowystinger
Thanks for the Safari testing!

I've added @starting-style to the Storybook example to address the enter animation issue in Safari. However, this is a CSS-level consideration that developers will need to handle in their own implementations when targeting Safari.
I'm not sure of the best way for React Aria to help developers discover this Safari-specific requirement.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I don't think this should be necessary. data-entering should be enough. If it isn't working, then that's a bug we should investigate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Popovers: issues transitioning child elements
3 participants