[bug]: date-time picker closing works partially

[MartinGbz]

Describe the bug

Somehow, we need to click 2 times outside of the calendar to make it closed.
On my project, I got the issue every time, but on https://shadcnui-expansions.typeart.cc/docs/datetime-picker it happened only sometimes.

The double outside click issue happen only when you choose a different value, so if you open and then click outside (without picking a value), the calendar will close.
But if you open it, choose a value, then you'll need to click 2 times to make it close.

I tried to dig into the problem, without success, so that's why I'm opening this issue.

Affected component/components

DateTimePicker

How to reproduce

• Click on the DateTimePicker
• Choose a value
• Click outside the calendar to close it
  => sometimes you will be forced to click 1 more time to make it close

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

No response

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[hsuanyi-chou]

Currently, I don't find the root cause.

Following is what I've tried.

• Add popoverContent.onFocusOutside and found that it's not triggered at first click.
• Add an open useState to control the popover. Still not trigger at first click, and so does Popover.onOpenChange.
• Using state in useDatePicker(which is from react-aria) to control the popover. Another issue showing: Select the date and close the popover immediately. (Because the state.isOpen became false). It looks like we can't disable it.

The issue looks like that when you select a date, something blocks all activities.

I think that's related to react-aria and I am still digging it.

[hsuanyi-chou]

Hi,

I found that react-aria is difficult to maintain and not easy to get started with. For those who are new to it, it takes too much time to go through the documentation and still find it hard to modify. Later, I discovered the time-picker created by openStatus.

Therefore, I rewrote the entire datetimePicker. Although the input method is not as fancy as react-aria, the maintainability should be much better.

Since it has been completely rewritten, the existing issues will be closed.

You can visit datetime-picker to get the new one.

Thank you for your understanding and use.