Skip to content

fix(web): remove animated attributes when value is undefined#2439

Merged
joshuaellis merged 1 commit into
nextfrom
fix/animated-attribute-removal
May 21, 2026
Merged

fix(web): remove animated attributes when value is undefined#2439
joshuaellis merged 1 commit into
nextfrom
fix/animated-attribute-removal

Conversation

@joshuaellis

@joshuaellis joshuaellis commented May 21, 2026

Copy link
Copy Markdown
Member

Summary

Animated DOM attributes whose value resolves to undefined are now removed via removeAttribute instead of coerced to the string "undefined". Boolean-style attributes like inert and disabled were broken because their presence enables them — any value (including "undefined") keeps them active. The same fix applies to viewBox, className, and children (which now clears textContent).

Defined falsy values such as 0 or "" are unaffected and still go through setAttribute.

Tests

Six new cases in targets/web/src/animated.test.tsx under animated component attribute removal:

  • inert removed when its animated value becomes undefined
  • generic attribute (data-foo) removed when value becomes undefined
  • viewBox removed when value becomes undefined
  • className removed when value becomes undefined
  • children clears textContent when value becomes undefined
  • defined falsy values (e.g. tabIndex={'0'}) still applied via setAttribute

Tests use a small TestFluid<T> helper that extends FluidValue so a value can transition to undefined (which SpringValue itself does not support).

Notes

Closes #2319 by @LoganDark, rebased onto next and extended to handle className (per reviewer comment on the original PR). Original author credited via Co-authored-by on the commit.

`applyAnimatedValues` previously called `setAttribute(name, undefined)`,
which coerces to the string "undefined". For boolean-style attributes
like `inert` or `disabled`, the attribute's presence is what matters —
"undefined" keeps them active. The attribute must be removed entirely.

Now: when an animated value resolves to `undefined`, the attribute is
removed via `removeAttribute`. The same applies to `viewBox`,
`className`, and `children` (which clears `textContent`). Defined falsy
values such as `0` or `""` continue to flow through `setAttribute`.

Co-authored-by: LoganDark <github@logandark.mozmail.com>
@vercel

vercel Bot commented May 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-spring Ready Ready Preview May 21, 2026 7:59pm

Request Review

@changeset-bot

changeset-bot Bot commented May 21, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e65c1bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@react-spring/web Patch
@react-spring/animated Patch
@react-spring/core Patch
@react-spring/mock-raf Patch
@react-spring/parallax Patch
@react-spring/rafz Patch
@react-spring/shared Patch
@react-spring/types Patch
@react-spring/konva Patch
@react-spring/native Patch
@react-spring/three Patch
@react-spring/zdog Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@joshuaellis
joshuaellis merged commit 344972e into next May 21, 2026
16 checks passed
@joshuaellis
joshuaellis deleted the fix/animated-attribute-removal branch May 21, 2026 20:02
This was referenced May 21, 2026
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.

1 participant