Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Picker inside Modal does not select date on MacOS 12 / Safari 15

See original GitHub issue

TLDR: This is a clone of https://github.com/wojtekmaj/react-date-picker/issues/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 https://github.com/wojtekmaj/react-date-picker/issues/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()
       }
     });