onAnimationEnd is not called after the opening animation (when using the open prop)

[clementoriol]

Issue
On a controlled drawer (that uses the open prop to open/close, as its state is managed by a parent component),
the onAnimationEnd prop function is not called after the opening transition.

Expectations
onAnimationEnd should always be called after the opening transition, even when using the open prop instead of a Vaul.Trigger

Reproduction
Codesandbox link: https://codesandbox.io/p/devbox/zzfxtc

[kavika-1]

Agreed - and would also be helpful if onAnimationEnd would also be called when the open prop is set to false to allow signaling the parent to wait for the close animation to complete before cleaning up the Drawer.

[travikk]

@emilkowalski facing this issue as well.

[MaximKondratev]

It is related to the same onOpenChange not being called as I described in my latest issue (my debug adventure is also described there and it is the root problem). onAnimationEnd is called inside onChange (same as onOpenChange) which at the end expected to be triggered by Radix Dialog here, but it does not for controlled state change.

I think the best way is either to move onChange body to useEffect to remove dependency of Radix implementation, or add useEffect inside useControllableState to call onChange there when state changes no matter controlled or not

[tgdn]

Facing the same issue. onAnimationEnd is never triggered when either opening or closing a controlled drawer.

IMO this is a bug because regardless of whether the drawer is controlled or not there is an animation opening/closing it.

Use case: reseting the drawer's state once the animation has ended to prevent UI changes to be visible to the user.

In the code onAnimationEnd uses a timeout, to mimic this functionality we can do the same:

TIMEOUT_DURATION_IN_SECONDS = 0.5;

setTimeout(
  () => {
    // Your code
  },
  TIMEOUT_DURATION_IN_SECONDS * 1000,
);