formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Tooltips sometimes not disappearing/changing state correctly #237

Closed vladoyoung closed 2 months ago

vladoyoung commented 3 months ago

Describe the bug The tooltip text state for show/hide gets stuck in "show" sometimes.

To Reproduce https://codesandbox.io/p/sandbox/silent-glitter-twvnnc

This happens on other scenarios where state gets switched, or when dynamically updating the tooltip text, but holding tab is the easiest way to reproduce.

Expected behavior The tooltips to not glitch and get stuck in the active state.

Screenshots Holding tab in the codesandbox:

https://github.com/formaat-design/reshaped/assets/9999658/77b253e9-2511-4849-a690-ba04afdb8fa6

Environment (please complete the following information):

blvdmitry commented 3 months ago

Hm, trying to reproduce this in Chrome on Mac but no luck so far 👀 It does feel like your tabbing works faster though

https://github.com/formaat-design/reshaped/assets/887379/f39ca49a-9dea-4de9-8bdd-81417b30117d

vladoyoung commented 3 months ago

@blvdmitry Weird, this might be dependant on the mac "key repeat rate" keyboard setting. Here are my settings:

Screenshot 2024-04-04 at 11 10 13
blvdmitry commented 2 months ago

Found the issue, thanks for reporting. It was indeed happening because of the keyboard repeat rate setting. With the fastest one, navigation happens so fast that it doesn't have time to progress the opening transition and therefore transitionEnd handler was not called at all for those tooltips keeping them rendered and then showing again when completing the originally called effects. Having complex animation states definitely contributed to this, since if we were hiding all tooltips/popovers immediately – it wouldn't be an issue either.

I've added an additional ref to check if transition was triggered originally and if it's not – I'm moving directly to the "remove" stage instead of waiting for the transition:

https://github.com/formaat-design/reshaped/assets/887379/80bd3021-b9f5-4358-836f-e8ce986a6737

This fix will be out with the latest minor release on Monday