Popup-menu closes when refresh is called during initial render

[marstamm]

Describe the Bug

In this Component, the popup menu will close directly when the promise is resolved instantly and the timeout is removed
https://github.com/bpmn-io/refactorings/blob/main/lib/popup-menu/RefactoringsPopupMenuProvider.js#L30-L32

Steps to Reproduce

Steps to reproduce the behavior:

1. do this
2. do that

If possible, try to build a test case that reproduces your problem.

Expected Behavior

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

Environment

Please complete the following information:

• Browser: [e.g. IE 11, Chrome 69]
• OS: [e.g. Windows 7]
• Library version: [e.g. 2.0.0]

[marstamm]

Root Cause
We open the Menu using a click event, that originates outside of the Popup menu.

We register event listeners on the body, to check whether and outside click occurred, in an useEffect hook. Per default, the effect execution is delayed until after the browser renders the next frame.

Because of how Promises are scheduled when they are immediately resolved we call popupMenu.refresh() before the original click event bubbles to the body.
This forces a re-render of the Preact component, which forces execution of the delayed effects. The event listeners are created on the body, while the original click event is still pending.

When it bubbles up to the body, the check fails and closes the menu directly.

How to fix it
We discussed possible solutions in the Hour of Code. We agree that the use-case is valid and this is a bug in the core.

However, we were unable to find an elegant solution. The solution sketch we came up with is as follows:

• Move the outside-click logic out of the Preact component. It uses css selectors only (no refs) anyway.
• Ensure that the listener is registered/active only after the initial rendering has happened, e.g. using requestAnimationFrame.

Conclusion
As we have a workaround in refactorings, this is an edge-case and the solution is not elegant, I will move this to the backlog for now. If you want to experiment with it, I added the test-case I used to showcase it in the HOC here: https://github.com/bpmn-io/diagram-js/tree/877-experiement-popup-menu-event-handler