Datepicker in Actions closes the action modal prematurely

[uandco]

• Laravel Version: 8.73.2
• Nova Version: 3.31.0
• PHP Version: 8.0.14
• Database Driver & Version: MySql 5.5.5-10.4.21
• Operating System and Version: MacOS 11.6.4
• Browser type and version: Chrome 99
• Reproduction Repository: N/A

Description:

Action modals get closed when clicking Datepicker's month navigation, month dropdown, year field, hour, minute or seconds fields.
The only elements not prematurely closing the modal are the day buttons.

After clicking the elements causing issues, the Action modal is closed and the calendar remains open.

I downgraded to 3.30.0 (issue still present).
Issue is not present in 3.29.0

I believe this is a regression introduced by this fix in 3.30.0:
Fixed issue with clicking away from a modal when using an iPad.

Detailed steps to reproduce the issue on a fresh Nova installation:

• Create a resource

• add an action to the resource

• add a date field to the action.

• Trigger the action

• click the date field

• click anything else than a day in the DatePicker (see list of fields causing issue above)

[uandco]

When creating my 3.30 to 3.29 downgrade PR, I noticed this prop was populated again in nova/resources/js/components/Modals/ConfirmActionModal.vue

    :classWhitelist="[
      'flatpickr-current-month',
      'flatpickr-next-month',
      'flatpickr-prev-month',
      'flatpickr-weekday',
      'flatpickr-weekdays',
      'flatpickr-calendar',
    ]"

I guess these are missing in 3.30+ to avoid the premature close.

[crynobone]

Do you by any chance has any 3rd party that interacts with Date/DateTime field? Can you share your composer.json contents?

[uandco]

Do you by any chance has any 3rd party that interacts with Date/DateTime field? Can you share your composer.json contents?

We have a fair bit of extra components but none interacts with the DateTime field.
Actually, following up on my previous comment, I switched back to 3.30 (from 3.29) and populated the classWhitelist prop as it was in 3.29. After recompiling/republishing nova, the issue is fixed, so it's definitely the root cause.

[crynobone]

I guess these are missing in 3.30+ to avoid the premature close.

This was removed to avoid depending on classes that don't exist while DatePicker transitions between show and hide as described in #3476. Previously reported issue after upgrading to 3.30 rely on 3rd party packages that weren't updated to support the changes, see #3683

Can you share composer.json contents?

[crynobone]

Unable to reproduce the issue on basic Laravel Nova installation, see nova-issues/issue-3778@493f9b7

CleanShot.2022-03-16.at.13.20.12.mp4

[uandco]

Unable to reproduce the issue on basic Laravel Nova installation, see nova-issues/issue-3778@493f9b7

My sincere apologies. Digging further I noticed techouse/intl-date-time is used for DateTime fields. I removed the classWhitelist prop again, used the stock Nova DateTime field in the action, and the issue is gone.

I will open an issue with https://github.com/techouse/intl-date-time

[crynobone]

All custom flatpicker() implementations now should emit 2 new event via Nova.$emit(). datepicker-opened and datepicker-closed. Modal Vue component will use this event to determine whether it can close itself instead of relying on classWhitelist