[BUG] AnimatePresence sometimes does remove elements when two or more elements are removed in a short time.

[jancassio]

1. Read the FAQs 👇

2. Describe the bug
Using AnimatePresence element to remove elements with exit animation works but sometimes does not remove all elements from the render tree.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
Demo reproducing the problem here

4. Steps to reproduce

1. Type some text in the input field
2. See an animation right below of characters appearing animated.
3. Also, see a "caret" icon at the right, pay attention to the distance between the last typed char and the caret.
4. Remove some text by typing backspace faster or press and hold backspace to remove some text.
5. Notice there's a larger distance between the last character and the caret.
6. Use the DevTools -> Elements (or right click, "Inspect)" to inspect the dom.
7. Notice the are some elements that already performed exit transition but weren't removed from the element's tree.

5. Expected behaviour

The expected behaviour is for the all removed characters to perform an exit transition and be removed from the element's tree.
Also, the visible expected behaviour is to the "cared" always be immediately at the right of the last visible character.

A clear and concise description of what you expected to happen.

6. Video or screenshots

framer-motion-animated-presence-bug.mov

7. Environment details

All running in macOS Monterey (12.4) Intel-based machine.

Browser	Version
Brave	1.41.96
Chrome	103.0.5
Safari	15.5
Firefox	102.0.1

The same issue is also reproducible at Safari running at iOS 15.1.

Updates

• Original issue has been found at v6.5.1.
• Reproduced with v7.0.0.

[jancassio]

Related to: #1569

[JPaulDev]

Having a similar issue, I have couple elements that I remove on window resize, if I resize the window too quickly elements complete their transition animation then don't get removed from the DOM and end up stuck there.

[julio-benavente]

I haven't been able to solve the problem but using a hook to slow the frequency my function was called helped me to avoid crashes. It doesn't behave as I would like but it doesn't crash.

https://usehooks-ts.com/react-hook/use-debounce

[mattgperry]

Fixed in latest