[BUG] Exit animation won't trigger after expanding animation of Reach Disclosure completes

[Polm1]

1. Read the FAQs 👇

2. Describe the bug

As title, exit animation will trigger only before expanding animation will completes and disclosure is closed instantly.

Animating straight the DisclosurePanel is even worse because some side-effect will cause animation stutterings (maybe to related to suggested "height: "auto" is jumping" on the Faqs below in this template)

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-reach-disclosure-0dvljh?file=/src/Example.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open console
2. Click on button to open disclosure
3. Await to -- animation complete -- log
4. Click again on button to close disclosure and see that it closes instantly

To see exit animation, quickly click again on button to close disclosure before -- animation complete --` log

5. Expected behavior

Exit animation should trigger even after animation completed

6. Video or screenshots

7. Environment details

React 17.0.2

Styled components 5.3.5

Reach/Disclosure 0.17.0

Framer Motion 6.3.11

FAQs

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[mattgperry]

I'm not sure how the Disclosure component works but this works when changing to a div so this is a wontfix.