onChange does not work in Safari latest

[phtmgt]

Title says it all.

Safari 12.03, [email protected]

onChange simply does not work.

[wojtekmaj]

Title says it all.

Not really. What's the error, if any? What's not working in it?

Just tested 12.1 and it works just fine. 🤔

[phtmgt]

No error, it does not fire at all.

I don't have 12.1 yet, as I believe it was released a few weeks ago. I will update and get back.

[phtmgt]

Ok, updated to 12.1, but still experiencing the issue. Funny thing is this only happens on safari. Will get back here once I find out what's causing it.

[wojtekmaj]

Check out newly released v2.4.0. There were some fixes for *ahem* special browsers.

[phtmgt]

Same thing with 2.4.0, unfortunately:

<DateTimePicker
	className="form-control"
	value={this.state.dueAt}
	onChange={() => console.log('io')}
	locale={i18n.language == 'bg' ? 'bg-BG' : 'en-GB'}
	calendarIcon={null}
	clearIcon={null}
	disableClock
/>

This does not fire.

onCalendarClose does fire, though.

[bradleyy1012]

I have the same issue in Safari. onChange does not fire if you click on any date on the calendar if the calendar was not opened using the calendar button (like if you just click in the input field).

[jordanell]

Just to add to this, I am on MacOS High Sierra 10.13.6 and using Firefox 69.0.3 and am experiencing this same issue.

The calendar picker opens up fine, but when you click inside the calendar, on a date or month change arrow or anywhere, the calendar simply closes without triggering onChange as if you clicked outside the calendar.

[jordanell]

Quick update, it seems the issue is the fact that the focusin event is being used instead of focus. From the MDN web docs:

The main difference between this event (focusin) and focus is that focusin bubbles while focus does not.

My guess is that the bubbling is causing some issue somewhere else in the code base.

If I manually change focusin to focus locally everything works as expected.

@wojtekmaj are you up for a PR that makes this change? I am not sure about the far reaching implications if this was to be made.

Edit: I downgraded to v2.0 before focusin was used and everything works as expected.

[wojtekmaj]

I don't see how focus/focusin is connected to onChange, can you elaborate?

Anyway... Using focus instead of focusin is very much intentional. focusin fires when another object within the object we're listening in gets focus. This way, when the user changes focus to some other field using keyboard, calendar in React-Date-Picker will close. focus event, on the other hand, would fire once when the user focuses on something in the document and would never fire again on next focus events, causing the calendar not to be closed.

[jeffijoe]

I have the same issue, Safari isn't emitting changes, I'm on the latest and greatest version of this package. react-date-picker has the same problem.

[shank-eric]

I believe I've tracked this down to this line and whether the browser focuses a button when the user clicks it. As documented here, clicking a button in Safari/FireFix on Mac does not set focus on it, and as such it appears that the focus then bubbles up to the next available element. In my case, that's a div above the date picker, which then triggers a focusin event with that parent div as the target and causing onOutsideAction to think that the focus has moved outside of the datepicker and close the widget. This all happens before the click event itself, such that the widget closes before it and prevents it from happening.

I found two possible solutions to this:

1. The event passed to the onOutsideAction function appears to have a relatedTarget that's getting set to one of the inputs. I was able to check for that being inside of the wrapper to avoid closing early.

      if (_this.wrapper && !_this.wrapper.contains(event.target) && !_this.wrapper.contains(event.relatedTarget)) {

2. If I set a tabIndex of -1 on the wrapper, when the bubbling happens, it focuses that element making it the target of the focusin event. This element is inside the wrapper already and thus the onOutsideAction check doesn't close the widget.

I'm not sure if one of these is preferable or if there's a different/better option I haven't discovered.

[gabdorf]

Same issue here on iOS and Firefox (Desktop). Did anyone solve this problem?

[shank-eric]

The solution I described in 2. in my previous comment is how I worked around this. It ended up looking basically like this:

  onRef = (picker) => {
    if (picker) {
      const pickerEl = ReactDOM.findDOMNode(picker);
      pickerEl.tabIndex = -1; 
    }
  }

  render() {
      return <DateTimePicker ref={this.onRef} />;
  }

[devintyler]

The solution I described in 2. in my previous comment is how I worked around this. It ended up looking basically like this:

  onRef = (picker) => {
    if (picker) {
      const pickerEl = ReactDOM.findDOMNode(picker);
      pickerEl.tabIndex = -1; 
    }
  }

  render() {
      return <DateTimePicker ref={this.onRef} />;
  }

I can confirm that this works, but ReactDOM.findDOMNode is "not recommended" so I wonder if there's a different solution that can be added to the library itself for these cases.

[jflatby]

Same here - the suggested workaround works, but I don't want to use it.

The online demo DOES work on macOS safari and firefox even without opening the calendar by clicking the icon.. Has that demo just used the same workaround using findDOMNode()?

[jsmitrah]

Here also, I'm facing the same issue. onchange wasn't triggered while changing the date. Did anyone fix this problem earlier? If yes means, Can you help me fix this issue?

[JamieDixon]

@devintyler Thanks for that solution. We're also having the same issue but only when the calendar component is rendered in a modal. Otherwise it's fine. Your solution patches the issue but it'd be nice if either 1) The component would let us give it a tabIndex directly (i.e. passed all unknown props to the HTML element) or 2) the issue was directly fixed (obvs lolsob).

[rachel-adelle]

We just ran into this issue as well, the calendar will open but clicking anything inside it does nothing. Someone mentioned it only happens when rendered in a modal, will try moving it out for now. Also, I used BrowserStack to check that it works in the demo site, and it did seem to be working in Safari there. So I think moving it out of the modal will help.

[wojtekmaj]

I would greatly appreciate a CodeSandbox or something similar that would allow me to reproduce this issue.

Here's a template to start! https://codesandbox.io/s/react-datetime-picker-jif8c

[rachel-adelle]

Hi @wojtekmaj I've made a sandbox minimal reproduction by simply placing the datepicker inside of a modal here: https://codesandbox.io/s/epic-mountain-7ldnj

The issue is, ONLY in Safari browser, if the datepicker is inside of a modal, the datepicker calendar will work if you opened it through the actual calendar icon all the way to the right. But if you open the calendar by clicking on the date input itself, the calendar won't work.

[rachel-adelle]

Opening the calendar with the icon:

https://user-images.githubusercontent.com/84212414/152599142-f9471ded-5ccf-4114-ba89-1badeb1373de.mp4

Opening the calendar through the input:

https://user-images.githubusercontent.com/84212414/152599197-c77a9ee2-c03e-446f-84df-63e7dbe14a18.mp4

Happens when clicking anything, including month/year arrows

[github-actions[bot]]

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[bot]]

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

[JamieDixon]

Apologies to continue this but the issue persists in the latest version of the code. Just want to make sure this ticket doesn't fall by the wayside. 👍

[tobiastom]

As the previous workaround (mentioned in https://github.com/wojtekmaj/react-datetime-picker/issues/56#issuecomment-687138070) did not work anymore, I did create a fix to solve this issue. Any feedback is very welcome.