Buggy DatePicker inside of Dialog

[dvlden]

Description

When I place DatePicker inside of a Dialog and I click on the DatePickerTrigger the layout will render. If I select prev/next or click the trigger that should change layout view to month the DatePicker will automatically close.

This weird behaviour is only in Safari, but in other browsers there's another bug that's related. Setting the min/max dates and clicking on disabled "prev/next" action or clicking anywhere near the action that changes layout view (from day to month for example) will auto close the DatePicker as well.

This behaviour is only present when DatePicker is used within Dialog. Not when DatePicker is used directly without component nesting.

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-qaltgb?file=src%2FApp.vue

Steps to Reproduce

1. Click "Click to Open"
2. Click "Show datepicker"
3. Click on "September 2024" to change layout view

In Safari, DatePicker will auto-close.

3. Click near "September 2024" on white background

In Chrome, DatePicker will auto-close.

Ark UI Version

3.13.1

Framework

• [ ] React
• [ ] Solid
• [X] Vue

Browser

Chrome, Safari

Additional Information

No response

[segunadebayo]

Temp. A fix for this is to assign tabIndex to the date picker content. That way, the pointerdown doesn't send focus to the body (which is the root cause of the close)

We'll fix that in Zag.js shortly.

[segunadebayo]

I just pushed a fix for this in Zag.js. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.