React-date-picker: onChange event is not fired on Safari browser

[podlesny]

When I click on datepicker and choose a date, onChange event is not fired in Safari, however in Chrome everything works as expected. I don't have any errors in console. Implementation is similar to this

<DatePicker
 disabled={props.disabled}
showLeadingZeros
format="MM/dd/yy"
calendarIcon={null}
clearIcon={null}
onChange={value=>console.log(value)}
value={props.options.end.val}
/>

[darekkay]

I cannot reproduce it, it's working fine for me (macOS 10.15.5, Safari 13.1.1.).

[pedrofsantoscom]

@podlesny are you using the DatePicker inside a modal/dialog, perhaps from MaterialUI? i'm having the same issue with the DatePicker inside the MaterialUI Dialog
you can try this demo: https://codesandbox.io/s/react-date-picker-forked-1ee7e?file=/index.js

• date picker on the page works fine.
• date picker inside the popup (click the button to open the popup), the onChange only gets triggered if you open the calendar via the calendar icon.
  if you open it clicking on the field, the onChange doesn't trigger.
  https://codesandbox.io/s/react-date-picker-forked-1ee7e?file=/index.js

@wojtekmaj can you check this one?

[pedrofsantoscom]

@podlesny Fixed the safari bug using https://github.com/wojtekmaj/react-date-picker/issues/274#issuecomment-650042494 code and then making this change to the condition:

...
_this.onOutsideAction = event => {
      if (
        _this.wrapper &&
        !_this.wrapper.contains(event.target) &&
        !event.target.className.indexOf('react-calendar') // fix for safari calendar bug
      ) {
        _this.closeCalendar()
        event.stopPropagation()
      }
    }

[moeen-basra]

@pedrofsantoscom some time event.target.className is object in that case its throwing exception

TypeError: _event$target$classNa.indexOf is not a function

HTMLDocument._this.onOutsideAction

  22 | 
  23 | _this.onOutsideAction = event => {
  24 | 
> 25 |   if (
  26 |     _this.wrapper &&
  27 |     !_this.wrapper.contains(event.target) &&
  28 |     !event?.target?.className?.indexOf('react-calendar') // fix for safari calendar bug

Here is how I fixed this

_this.onOutsideAction = event => {

      if (
        _this.wrapper &&
        !_this.wrapper.contains(event.target) &&
        (typeof  event?.target?.className === 'string' && !event?.target?.className?.indexOf('react-calendar'))
      ) {
        _this.closeCalendar()
        event.stopPropagation()
      }
    }
  })

[jayhaluska]

Had the same bug both in mobile Safari (iOS 14.4) and desktop Safari (14.0.1). @pedrofsantoscom fix worked perfectly fine, thank you!

For me the calendar worked, when I opened it with the calendar icon. It did not work when I opened it through clicking on the date numbers.

This really needs an official fix.

[wojtekmaj]

I tested on Safari 14.0.1 and onChange works fine:

and calendar opens on input click just fine as well:

so I don't know how to reproduce this issue.

[jayhaluska]

For me the bug was not the opening of the popup, this is working fine. The bug was that it was not possible to choose a value properly. When clicking on a day, the popup closes but the onChange event is not triggered, thus it was not possible to retrieve the date.