@radix-ui/react-presence doesn't handle the `animationend` event correctly when keyframe has escapable character

[frarillotta]

Bug report

Current Behavior

When using an exit animation on @radix-ui/react-dialog for the overlay, we noticed that if the keyframe has a special character (in our case \+ generated from webpack hashing classes using base64) in its name, Presence does not correctly unmount the element, but is rather left hanging for the animation to finish. This is due to the Presence component using getComputedStyles which seems to escape those character and fails to correctly resolve isCurrentAnimation due to the mismatch between the two strings (check screenshot for the example we have seen), being left in unmountSuspended state.

Expected behavior

When dialog is closed, all Presence elements should be unmounted correctly.

Reproducible example

Very crude example with dialog. To reproduce, open the modal, click "Save changes" and you will see the exit animation playing correctly, but the overlay element (.DialogOverlay) not unmounting. The correct behaviour can be replicated by changing the keyframe overlayFadeOut\+R8 (and the consuming animation in .DialogOverlay[data-animate="true"]) to not have the \+ (i.e. overlayFadeOutR8)

Suggested solution

A potential solution could be not to use event.animationName in the animationend handler but rather to use getAnimationName(getComputedStyles(event.target)), or simply to escape the event.animationName similarly to what getComputedStyles returns.

Additional context

Your environment

Same as sandbox

Software	Name(s)	Version
Radix Package(s)	react-presence	1.0.1
React	n/a	17.0.2
Browser	Chrome	121.0.6167.184
Assistive tech
Node	n/a	16.17.0
npm/yarn	pnpm	8.15.4
Operating System	macOS	13.6.1

[benoitgrelard]

Do you know what sort of escaping it's currently doing? ie. is there a built-in function we could call to get the same result?

[frarillotta]

Do you know what sort of escaping it's currently doing? ie. is there a built-in function we could call to get the same result?

Not entirely sure, from what I could get from logging what the function sees seems to come from stylesRef which is set here, which in turn uses getComputedStyles. We could also use getComputedStyles on the event (event also has a target property)

[haoqunjiang]

I opened a PR to fix this issue using CSS.escape: #3466

Here's the fixed example with patches applied: https://stackblitz.com/edit/vitejs-vite-dm8pji1o (I couldn't figure out how to apply patches in CodeSandbox, so I recreated a StackBlitz example)