Overlay has old onClosed callback stored

[kutensky]

Environment

• Package version(s): 5.10.1
• Operating System: Win10
• Browser name and version: Chrome 122

Code Sandbox

Link to a minimal repro this code sandbox:

Steps to reproduce

1. Click "Open Dialog". Drawer will be opened.
2. Click on "Inner Button" button.
3. Click outside of the drawer.

Actual behavior

When drawer is closed by outside click, it should call the latest callback passed to "onClose".

Expected behavior

Drawer call the first callback that was attached to it when it was opened.

Possible solution

This problem isn't only Drawer specific. It reproduces for every component that use Overlay.

I found next problems in overlay2.tsx
Problem 1:
line 202:
React.useEffect(() => { document.removeEventListener("mousedown", handleDocumentMousedown); }, [handleDocumentMousedown]);
This function intends to remove old callback when the callback was updated. But in fact it tries to remove new callback that wasn't set yet.
So to fix this, we should keep the old function somewhere and remove it from event callbacks rather than removing the new callback.

Problem 2:
Event listener to mousedown on the document is set in "overlayWillOpen" function (line 274):
document.addEventListener("mousedown", handleDocumentMousedown);

"overlayWillOpen" function get called only when the drawer is just opened (line 317).
I could understand how this was working in overlay.tsx (previous version of overlay), but it did work before.
We need to reapply eventListener callback each time callback is updated