Date selection does not work inside MUI Modal

[seb-lie]

TLDR: This is a clone of wojtekmaj/react-date-picker#288 for the datetime-picker. The suggested fix solution worked on the 3.5.0 release of datetime-picker.

The bug

The issues is that the calendar popup closes, but does not propagate the selected date, when clicking on a date when it is itself is within a Modal on Safari. It is very specific to the last two conditions, but well, that's exactly our scenario :)

Steps to reproduce it

To reproduce:

• you need macOS and a recent Safari (tested with 15.4)
• go to https://codesandbox.io/s/react-datetime-picker-61wq02?file=/index.js
• click on button "not working datetime picker"
• click on the date text (2022/5/5 in the screenshot)
• dialog pops up with a calendar view (as in the screenshot below)
• hover over a date (e.g. 10) and with click

Expected:

• Selected date is set (value updates to 2022/5/10)

Actual:

• Selected date is not set (value remains 2022/5/5)

Screenshot

A Validated solution

For the 3.5.0 release was the below patch (from the wojtekmaj/react-date-picker#288) :

index 5d60e42..32cc7e5 100644
--- a/node_modules/react-datetime-picker/dist/DateTimePicker.js
+++ b/node_modules/react-datetime-picker/dist/DateTimePicker.js
@@ -98,11 +98,14 @@ var DateTimePicker = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "state", {});
 
     _defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
-      // Try event.composedPath first to handle clicks inside a Shadow DOM.
-      var target = 'composedPath' in event ? event.composedPath()[0] : event.target;
-
-      if (_this.wrapper && !_this.wrapper.contains(target)) {
-        _this.closeWidgets();
+      // fix from https://github.com/wojtekmaj/react-date-picker/issues/288
+      if (
+        _this.wrapper &&
+        !_this.wrapper.contains(event.target) &&
+        (typeof  event?.target?.className === 'string' && !event?.target?.className?.indexOf('react-calendar'))
+      ) {
+        _this.closeCalendar()
+        event.stopPropagation()
       }
     });

3.5.0 vs latest main

I'm not sure whether the issue reproduces on current main (2dce2af) as the onOutsideAction part changed slightly.

[rscotten]

hey, @wojtekmaj I'd really appreciate a fix to this. If the datepicker is in a modal in the Safari Browser on MacOSX, and you click the input to open the datepicker dropdown, the calendar days and month don't update when clicking the right and left arrows.

[rscotten]

@wojtekmaj This is what happens when I open the datepicker and click the right arrow twice:

(again, it only happens in MacOS Safari in a modal)

[wojtekmaj]

What do you mean "in a modal"? Do you have time to create reproducible example on CodeSandbox?

[seb-lie]

I've updated the example to use v4.0.0 from yesterday - instructions are still valid from above (section "Steps to reproduce it"). It's still 100% reproducible.

https://codesandbox.io/s/react-datetime-picker-61wq02?file=/index.js

[wojtekmaj]

It looks like MUI is messing the styles up. Safari has nothing to do with it, on Chrome it's the same story.

Here it is compared to native <dialog>:

https://codesandbox.io/s/react-datetime-picker-mui-and-native-dialogs-r6vnf9

I don't know anything about MUI specifics, and I don't know how they manipulate Dialog's children, so I won't be able to help you with it personally, but I'll keep it open if anyone from the community would be willing to help.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.