Number flies off the page when using antd Tabs component

barvian / number-flow

A React component to transition, format, and localize numbers.

https://number-flow.barvian.me

MIT License

2.73k stars 54 forks source link

Number flies off the page when using antd Tabs component #9

Open ytkimirti opened 1 month ago

ytkimirti commented 1 month ago

The component looks really good, I wanted to use it in my project and stumbled upon this bug.

It's quite specific. It happened when using antd's Tabs component.

It does not happen when destroyInactiveTabPane: true in antd
It does not happen when there is no update (you can remove the useState to test)

I don't have much experience with framer motion so I couldn't go deeper, maybe the problem is from antd or framer motion but I am not sure.

Minimal reproduction: https://codesandbox.io/p/devbox/6vsgx6

barvian commented 1 month ago

Hey, thanks for filing and the kind words 👋. I think this happens because antd hides the tabs by default instead of removing them from the DOM. I added the destroyInactiveTabPane prop and it seemed to mitigate the issue: sandbox. Curious to hear your thoughts.

ytkimirti commented 1 month ago

Yeah, could there be a fix? Maybe an option in framer motion?

barvian commented 1 month ago

Not that I'm aware of but I'd be interested if you found one! Would the destroyInactiveTabPane prop be viable for you?

ytkimirti commented 1 month ago

Unfortunately no, if I find time, I will look further into it