Animated component breaks formatted string
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
🐛 Bug Report
I have an <animated.p>. It gets passed a formatted string from Intl.NumberFormat with signDisplay: "always". This means a + is prepended. This plus gets dropped by the component 🙈 .
I've logged the strings as they get passed, it never omits the plus. Yet, after the animation is finished, the component with its child string gets rerendered for whatever reason it seems, and the plus disappears.
I'm pretty stumped. As it stays on the minus side I was thinking maybe it gets parsed, recognized as number, re-stringified, and that's how it disappears. Has to be something like it, and yet, even prepending a letter to the passed string to break any presumed parsing doesn't change anything.
To Reproduce
- create an animated component with a spring that animates to a positive number.
- pass the positive number formatted with NumberFormat
signDisplay: always
Expected behavior
strings stay formatted the way they're passed.
Link to repro (highly encouraged)
https://codesandbox.io/s/happy-breeze-k5b37?file=/src/App.js
If you'd like to skip the repro, here's what the following logs:
<animated.p className="-mb-2">
{growthRateA.to((n) => {
console.log(
"gauge val",
growthRate,
n,
percentChangeFormatter.format(n)
);
return `${percentChangeFormatter.format(n)}`;
})}
Details
gauge val -0.011 -0.011 -1.1%
gauge val 0.031 -0.011 -1.1%
gauge val 0.031 -0.010121548193517607 -1.0%
gauge val 0.031 -0.00857916774249765 -0.9%
gauge val 0.031 -0.005950740117543118 -0.6%
gauge val 0.031 -0.0029392530728557277 -0.3%
gauge val 0.031 0.0030268882813645867 +0.3%
gauge val 0.031 0.0043572052262135326 +0.4%
gauge val 0.031 0.008124811754838784 +0.8%
gauge val 0.031 0.012428674047926122 +1.2%
gauge val 0.031 0.015282572633774496 +1.5%
gauge val 0.031 0.019405160906445458 +1.9%
gauge val 0.031 0.022080519063728186 +2.2%
gauge val 0.031 0.02389470716540138 +2.4%
gauge val 0.031 0.026299391624859 +2.6%
gauge val 0.031 0.028825197159883555 +2.9%
gauge val 0.031 0.030074829158552547 +3.0%
gauge val 0.031 0.031120467901732316 +3.1%
gauge val 0.031 0.032136375095277364 +3.2%
gauge val 0.031 0.03324458904176794 +3.3%
gauge val 0.031 0.03341674944892716 +3.3%
gauge val 0.031 0.03379429059057049 +3.4%
gauge val 0.031 0.034034462926820684 +3.4%
gauge val 0.031 0.03402336228008903 +3.4%
gauge val 0.031 0.033967395783605976 +3.4%
gauge val 0.031 0.0338198482844161 +3.4%
gauge val 0.031 0.033655547240881566 +3.4%
gauge val 0.031 0.03323786042677272 +3.3%
gauge val 0.031 0.033175304905596906 +3.3%
gauge val 0.031 0.032903915378158954 +3.3%
gauge val 0.031 0.03263141011617155 +3.3%
gauge val 0.031 0.03235126611329709 +3.2%
gauge val 0.031 0.03210147120371028 +3.2%
gauge val 0.031 0.03187080596101644 +3.2%
gauge val 0.031 0.03166233598676437 +3.2%
gauge val 0.031 0.031467693381792144 +3.1%
gauge val 0.031 0.03130912302727817 +3.1%
gauge val 0.031 0.031174775466065223 +3.1%
gauge val 0.031 0.031057804428564314 +3.1%
gauge val 0.031 0.030965058583005904 +3.1%
gauge val 0.031 0.030901156456320494 +3.1%
gauge val 0.031 0.03085035087798566 +3.1%
gauge val 0.031 0.030813362199849245 +3.1%
gauge val 0.031 0.030792923903493395 +3.1%
gauge val 0.031 0.030781616531037656 +3.1%
gauge val 0.031 0.03078008319142252 +3.1%
gauge val 0.031 0.030785416615148938 +3.1%
gauge val 0.031 0.03079703394264702 +3.1%
gauge val 0.031 0.03081304343731894 +3.1%
gauge val 0.031 0.030829713834723847 +3.1%
gauge val 0.031 0.030848873417013662 +3.1%
gauge val 0.031 0.030870956731571284 +3.1%
gauge val 0.031 0.030892771279615535 +3.1%
gauge val 0.031 0.030912490436875762 +3.1%
gauge val 0.031 0.03093465114884642 +3.1%
gauge val 0.031 0.0309566119187836 +3.1%
gauge val 0.031 0.031 +3.1%
gauge val 0.031 0.031 +3.1%
gauge val 0.031 0.031 +3.1%
Environment
react-springv9.2.4reactv17.0.x
Thanks for an amazing animation library! Managed to drop a full component. So easy to use 👍 .
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox at src/App.js and reproduce the animated.p case using react-spring v9.2.4, React 17, and Intl.NumberFormat with signDisplay: "always". Trace the child interpolation and the rerender after the animation completes. Done means formatted positive strings retain their leading plus sign.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100