[dialog] onOpenChangeComplete is triggered when dialog is dismissed through an outside click during enter transition.

[joncoronel]

Bug report

Current behavior

Trigger is clicked to open the dialog and onOpenChange is triggered. While the popup is in the middle of its enter transition, outside is clicked to dismiss the dialog. This triggers onOpenChangeComplete to run followed by onOpenChange. Once the exit transition finishes, onOpenChangeComplete runs again.

Expected behavior

On rc.0, when there's an outside click in the middle of the dialog popup enter transition, onOpenChangeComplete is skipped and only runs onOpenChange followed by onOpenChangeComplete after the exit transition finishes.

I noticed this difference when trying to block dismissal when clicking outside the popup only during the popup enter/exit transition. I previously did this by using an isAnimating state that is set to true in onOpenChange and then is set to false in onOpenChangeComplete. I then pass this state to disablePointerDismissal prop. This however does not work in v1. This is demonstrated in the examples below.

Not sure if this was an intentional change to have onOpenChangeComplete still run when the popup enter transition is interrupted.

Reproducible example

Two examples. Identical other than package version. More specific instructions found in the examples.

v1 example
rc.0 example

Base UI version

v1.0.0

Which browser are you using?

Chrome

Which OS are you using?

Windows/Android

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@3558