Dialogs closing immediately after opening since 1.6.0 when opened through FullCalendar handler

[dejagersh]

What package within Headless UI are you using?
@headlessui/vue

What version of that package are you using?
1.6.5

What browser are you using?
Chrome

Reproduction URL
This is the example for @headlessui/vue version 1.5 where it works fine. When you click in the calendar, the dialog opens.
Code Sandbox for FullCalender with Headless UI 1.5.0

Since 1.6.0, this is the behaviour:
Code Sandbox for FullCalender with Headless UI 1.6.5

Describe your issue
Since 1.6 @close is immediately triggered on render when opening the modal through an event triggered by FullCalendar.

In the first sandbox above, the modal opens when you press the button at the top. As expected. The modal can also be opened by clicking in the calendar. This works fine as well.

In the second example (with @headlessui/vue 1.6.5) the modal opens just fine when clicking the button. But when you click in the calendar, the modal opens and closes immediately because @close is triggered.

Maybe I'm using something in a way it's not supposed to be used, but this worked fine till 1.6.5 :(

[thecrypticace]

Thanks for opening the issue! This happened due to browser event firing order and attempts to work around browser issues. 😅

We switched to using click for events in v1.6.5 instead of mousedown because of browser issues in #1546. However, your implementation inadvertently relies on the fact that we were using mousedown because FullCalendar uses mouseup.

What used to happen:

• mouse down: modal not open so no outside click detected
• mouse up: select handler fires -> opens modal
• click: nothing

What now happens:

• mouse down event: nothing
• mouse up event: select handler fires -> opens modal
• click event: modal is open so outside click is detected -> closes modal

You can see that here (you can ignore the error — I was just using it to grab a stack trace):

I got this list by attaching a handful of event handlers to window before Headless UI put any on the window and using DevTools to add logging in a few spots.

I'll discuss this internally because it's definitely not ideal but I'm not sure what options we have at the moment that won't cause other kinds of breaks but we'll definitely look into what we can do to fix this.

In the mean time you can work around this by changing your implementation to wait until after the click event is done to open the dialog using setTimeout(() => this.openModal(), 0). Unfortunately a nextTick is not enough here because of the difference between micro tasks versus macro tasks.

[dejagersh]

Thank you @thecrypticace for your elaborate explanation and your suggested workaround. I will give that a shot and hopefully be able to update to 1.6 again :)

Edit: works like a charm 👍 thanks.

[thecrypticace]

@thejager

This has now been fixed by #1667, and will be available in the next release!

You can try it by using our insiders build:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[dejagersh]

Thank you!