Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] AnimatePresence won't unmount fastly changing content #907

Closed
alisasila opened this issue Dec 26, 2020 · 6 comments
Closed

[BUG] AnimatePresence won't unmount fastly changing content #907

alisasila opened this issue Dec 26, 2020 · 6 comments
Labels
bug Something isn't working

Comments

@alisasila
Copy link

alisasila commented Dec 26, 2020

Bug description:
Hi,
I'm using AnimatePresence to animate text that shows up while hovering over some tiles.
I noticed that if I hover quickly over the tiles, AnimatePresence will play the text animations correctly, but will not unmount the component after the exit animation plays.

I want said animation to happen every time a user hovers over a different tile, so in my case the animation happens when:

  1. The key of the HoverText component changes (according to the index of the tile, and the text being shown - makes sure it has a unique key).
  2. The HoverText component mounts and unmounts (mouse enters tile, mouse leaves tile).

CodeSandbox:
https://codesandbox.io/s/animatepresence-quick-key-change-bug-zggbr?file=/src/HoverText.js

Steps to reproduce:

  1. Go to the sandbox linked above.
  2. Choose a single tile and hover over it - notice the text above pops up
  3. Now stop hovering over the tile - AnimatePresence correctly animates and then unmounts the component.
  4. Now, quickly hover over all the tiles from side to side, and then stop hovering over the tiles - notice how AnimatePresence animates them all correctly (both in and out), but for some reason does not unmount the component after finishing the exit animation.

Video of bug:

Correctly animates, and then unmounts:

correct_behaviour_animatepresence.mp4

Correctly animates, and then doesn't unmount:

incorrect_behavior_animatepresence_BUG.mp4

Also, sometimes if you hover over a couple of tiles slowly, the component does unmount, but this behavior is not consistent.

I am using the exitBeforeEnter prop on my AnimatePresence, but the problem persists even without it.

Expected behavior:
After a user hovers over the tiles quickly, AnimatePresence should unmount the HoverText component after its exit animation.

Environment details:
Using Chrome (Version 87.0.4280.88) on Windows

@alisasila alisasila added the bug Something isn't working label Dec 26, 2020
@Lukavyi
Copy link

Lukavyi commented Jan 26, 2021

I have the same issue

@utileetdulce
Copy link

This seems to be related to
1534
1439

@silverprize
Copy link

silverprize commented Dec 19, 2022

Look at this issue please.

@Van4e3WT
Copy link

Van4e3WT commented Jun 6, 2023

This problem is still observed to this day

@mikkmartin
Copy link

mikkmartin commented Aug 19, 2023

Ran a few tests and It seems version ✅2.0.0-beta.77 it seems to work and bug is introduced in v ⚠️2.0.0-rc.1

Hope this helps to diagnose @mattgperry.

Meanwhile a potential workaround #1682 (comment) (haven't tested myself).

@mattgperry
Copy link
Collaborator

Since fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants