DateRangePicker not working correctly on iOS8 iPad iPhone

[alfonsogrondo]

In the midst of device testing, we're experiencing a strange issue with the DateRangePicker in mobile Safari on iOS8 on iPad/iPhone only.

When tapping the nex/prev month buttons the calendar slides only one month back or forward and no further. Is anyone else seeing this or have any suggestions to debug?

Thanks

Al

[majapw]

Hi Al! That seems like there might be a JS error triggering on the month transition. Can you use Safari dev tools to see if anything is happening in the console?

Here is a good resource for setting that up:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

Can you also let me know if you're on the latest version of react-dates?

[jamesmccann-zz]

I'm seeing this issue (or similar) on all browsers with react-dates@4.0.1. There seems to be an issue that occurs whenever you navigate to a month in the past and then hover over a date:

Message: null is not an object (evaluating 'this.dayPickerContainer.getBoundingClientRect')
at ~/react-dates/lib/components/DateRangePicker.js:567

[majapw]

Hi @jamesmccann, can you try upgrading to v4.1.0 and see if that helps? We fixed a bug with certain configurations that was giving the error you've shared.

[alfonsogrondo]

Apologies @majapw I have been on leave and only got back to this today. We saw these issues with v3.5.0 initially so I have switched a demo to react-dates v4.5.1 and still getting the same problems. Perhaps related but also noticing that clicking back one month from 'next' month jumps 2 months back! Have hooked up Safari Dev tools to the iPad and I'm not seeing any errors to help debug. Back to the drawing board.

[majapw]

Hi @awhenderson, no problem at all about the delay! I'd still love to get this fixed for you. It's weird because when I look at airbnb.com in the iOS simulator (don't have an actual device on me), I don't see this problem and we're on v4.1.0 right now. :/ Could you maybe send me the code for your demo/the set-up for the datepicker in general?

When you open the DateRangePicker, which month do you see right now? It seems like that month transition styles are not being applied correctly.

[alfonsogrondo]

@majapw Have a look at the live datepicker we have at http://www.visitscotland.com in your iOS simulator just to see what I am describing, I'd be interested if it triggers any thoughts as to the problem. The search module is just under the main image header at the top of the page, choose 'Accommodation' in the first dropdown to see the check-in/out Datepicker.

Frankly I'm not even sure if its a DOM/CSS iOS issue rather than React (BTW we're using react-dates v3.5.0 on live at the moment as I mentioned). Here is the code - go easy on me... it could be a lot cleaner but we are new to react here so still using ES5 and I have a lot of legacy stuff to navigate round ;-)

https://gist.github.com/awhenderson/3e65ef86ae97c12edd03a2ade3f8ca5c

When I open the datepicker (iPad IOS 8 Safari) it shows Dec and Jan as I would expect. Click forward once it goes to Jan Feb and click back it jumps to Nov Dec! Trying to advance the calendar past February doesn't work.

[alfonsogrondo]

@majapw Yeah I know what you mean about the airbnb.com datepicker it works great on iOS 8 without this problem at all, we guessed it was probably the latest version. Thanks

[majapw]

And updating to the latest version (v4.2.0) doesn't fix anything, correct? My initial thought was that maybe because you show/hide the DateRangePicker, something like #196 might fix things.

From the behavior, it appears as though the DayPicker's updateStateAfterMonthTransition method is never called (https://github.com/airbnb/react-dates/blob/master/src/components/DayPicker.jsx#L249). This method gets called when the transitionend event triggers on the CalendarMonthGrid container (https://github.com/airbnb/react-dates/blob/master/src/components/CalendarMonthGrid.jsx#L73) and well, we're not seeing an animation/transition on that container so this makes sense in some capacity. The real question is why it works for us when the same scenario is not working for you.

Let me investigate some more as to what's actually going on with the styles. Maybe we polyfill something or other on airbnb.com that I'm not aware of.

[majapw]

It does appear that the transform property is not being applied properly to the CalendarMonthGrid. I see this when I inspect the element:

I bet that we use some plugin at airbnb that autoprefixes this shit, and I am not doing that for you. Let me add whatever prefixes safari wants. I think I know how to fix this.

[alfonsogrondo]

Thanks @majapw I've tried your patch but doesn't seem to be having any effect unless I am doing something wrong on my local build. Good spot abut the auto-prefixer - we don't use that here at the moment but having spoken to my colleagues this morning it will be something we will implement.

Interestingly If I try the latest react-dates demo here in storybook: http://airbnb.io/react-dates/iframe.html?dataId=28791ab6-06cc-45d3-b973-5551a9d9a219 on a real iPad 3 running OS 8.1.1 I get exactly the same issues with lack of CSS transition and cannot advance calendar past Feb 2017, replicated in BrowserStack too with iPhone 6 Plus running OS8.

When you added the prefixes manually in your iOS simulator OS 8 did you get transitions working out of curiosity?

[alfonsogrondo]

@majapw My bad! Turns out I had an issue with my local configuration not updating to react-dates v4.2.0 so now seems to work for us here on our local builds - we will test further once we get a staging release on the go. Thanks for all your help, sorry for wild goose chase just now

[majapw]

@awhenderson Can you see if v4.3.0 fixes your issue? I believe that it should.

[alfonsogrondo]

@majapw Yes I can confirm the issue is fixed and all works as expected (tested on BrowserStack as can't verify on a real device today)

Thank you for your help!

[phtmgt]

Experiencing the same issue on iOS 14 with react-dates@21.8.0, except I can get back 2 months and forward 1 month. After going back 2 months one step forward brings it back to the starting month. All in all, very strange behavior. Same thing in our project and in the playground. On airbnb.com it works, but the layout there is vertical scroll + it does not allow going back.