Picker doesn't open on iOS 8

[leads]

The demos on http://amsul.ca/pickadate.js/ do not work properly on iOS 8. I am only testing on an iPad but am aware of similar issues on iPhone.

The opaque background shows but the position of the calendar is way down at the bottom, so it can mean a lot of scrolling.

iOS 8 possibly changed how it handles CSS position: fixed?

[leads]

An update to this - the 'classic' theme works ok.

[nicolomonili]

default theme :
I confirm the problem. tested on iOS 8 ipad 2
also (always on iOS 8 ipad 2), when a date is selected, the input remains selected and no longer able to open the calendar

classic theme :
works ok on iOS 8 ipad 2

[t0mtaylor]

I also confirm the issue, iOS8 with an iPhone 5C

[leads]

Had brief access to a Yosemite beta machine which allowed me to inspect a page in Safari via the iOS 8 Simulator. Couldn't see what the obvious issue was/is. I thought it would be CSS only but perhaps not.

Important to note that when the calendar is open, if you hit the 'Done' button (bottom bar, an iOS control) it seems to reset the form to the correct place. So perhaps something is happening to the DOM to effect position: fixed?

[waquner]

A blur() on the input element after opening the picker, fixed it for me!

[leads]

Can you share your code fix please? Just tried a blur event and there is no fix in the iOS simulator. Thank you.

[nicolomonili]

with jquery, .blur (); on input element on close event fixed the problem

[leads]

@nicolomonili and @waquner are you able to share your code fix please?

[nicolomonili]

       $('.myinput').pickatime({
            onClose: function() {
                $('.myinput').blur();
            }
        });

[leads]

Ok, thank you. Why/how does this work with the onClose event, when the issue is with it opening? Anyway, I'll try it now.

[nicolomonili]

I had this problem: after the onClose event, the input remained with the focus, then I put the .blur () on onClose event

[leads]

Ok, so did you have the issues of the calendar not showing correctly?

[nicolomonili]

in this issue (#523) 2 problem have been reported

1 : calendar not showing correctly (I also still have this problem, for now I use the classic theme)
2 : the problem of focus , solution : use .blur()

[leads]

Thank you for the clarification.

[waquner]

For me, problem 1 (calendar not showing correctly) was also fixed by blur(), but onOpen:

$('.myinput').pickadate({ onOpen: function() { $('.myinput').blur(); } });

[leads]

Thank you. Unfortunately that does not work in my situation, at least not on the iOS 8 simulator.

[leads]

With the 'classic' theme, once you have selected a date, you can't then re-open the calendar.
The blur() function solves the issue. I am sniffing (ugh) for iOS and only implementing on iOS.

Also, I am using the .on('close') function, rather than the 'onClose' function. 'onClose' screwed with my date format.

$('.myinput').on('close', function(event) {
   $('.myinput').blur();
});

[spirosdi]

Having the same issue with the default theme on iOS 8. The element.blur() call did not resolve the issue. Tried adding it in both listeners (onClose, onOpen). I noticed that toggling (first setting it to relative and then to fixed) the position:fixed of the .picker container in the onOpen listener fixed the issue. There is something wrong with the position:fixed support in iOS 8.

[sgb-io]

Same issues still happening in 8.0.2.

[amsul]

I've fixed it locally - will have it on the dev branch soon!

[amsul]

Pushed a fix to the master branch: https://github.com/amsul/pickadate.js/tree/master

If anyone can test and verify it works for them as well, I’d appreciate it.

There will be a tagged release soon.

[ajmueller]

Tested successfully on iOS 8.1.1 on both iPad and iPhone. Tag 3.5.4 has the issue and current master does not.

EDIT: While the issue of the picker never opening properly in iOS 8 is fixed on master, #559 appears to still potentially be an issue. On iPhone in portrait mode after selecting dates for one input two or three times in a row, it can take multiple taps on the input to re-open the picker. Strangely I do not have this issue in landscape mode on iPhone or in either orientation on iPad. I am using an iPhone 6 and iPad Air 2.

[timcreatewell]

Further to this issue, I'm noticing something strange on iOS8 (iOS simulator at this stage) with the master branch (using default style).

When I open the datepicker it now initially displays correctly, however if I attempt to select a month or year from the drop down lists (I'm using selectYears and selectMonths) the datePicker flies to the bottom of the page and leaves the user there?

[izifortune]

Got the same issue here. Also if you try to navigate through the months replicate the same behaviour of onOpen and onClose. I have set the blur() also on onSet and everything works fine

[ghost]

$('.myinput').pickadate({ onOpen: function() { $('.myinput').blur(); } });
also for me, this fixed the problem on iOS 8 and iPad 2

[amsul]

@timcreatewell, @izifortune I believe that's related to #609. As long as the picker opens, I believe this issue has been resolved...

[jokeyrhyme]

Hi. Great work on reduced this to a fix. The CHANGELOG.md file states that this has been fixed in 3.5.5, but this version has not been tagged or published. Does it look like 3.5.5 will be released soon? Or is it waiting for other work to be completed?

[jokeyrhyme]

@samblinkmobile @benbarclay

[amsul]

@jokeyrhyme the remaining issues for the 3.5.5 milestone: https://github.com/amsul/pickadate.js/milestones/3.5.5

Cheers.

[timcreatewell]

Hi there @amsul, thanks so much for releasing 3.5.5! I updated my project with the new files this morning but unfortunately (on the iOS simulator at least - iOS 8.1) I'm still seeing the same behaviour: when you choose a year/month from the drop downs (selectYears / selectMonths) the picker (using default style) still scoots to the bottom of the screen. Or could I be missing something?

[jokeyrhyme]

@timcreatewell I'm not sure if this is what you're experiencing, but I have noticed there are still a few layout issues with v3.5.5 on iOS. I've made an unlisted YouTube video here: http://youtu.be/2-Ha45DP2gw
@amsul it seems as though dismissing the pop-up by tapping outside it, instead of pressing the "close" button, makes it more likely (but not 100% likely) to experience weird layout issues.

[madthew]

I confirm I have the same issue. Ipad 3 IOS 8.2 datepicker not opening at all it opens just sometimes randomply. android all ok. I tried also the master and also the blur fix but nothing changed.

[NateWr]

Hi @amsul, it looks like this thing was never actually fixed. This solution still seems to work on v3.5.6 as well. Not sure what the solution is here but for now I'm still just commenting out those lines.

[riccardobevilacqua]

On iPad Mini with iOS 8.0.2 using v3.5.6, I still got this issue when I try to change date.
Suggested fixes didn't work.
Inspecting the mobile DOM using a MacBook, HTML code looks fine as usual.
The picker nearly behaves like it got a wrong z-index, it's invisible but the dropdowns are touchable.
Tuning CSS was useless.
Any hints, please?

[ajmueller]

@riccardobevilacqua is the device you're testing fixed to that version of iOS? Apple fixed some quirks with iOS 8's version of Safari in later updates. It's probably worth updating to 8.3 and then testing.

[riccardobevilacqua]

Same behaviour on iOS 8.3

EDIT
I tried again some suggested fixes, this solution worked on iOS 8.3:

$('.myinput').pickadate({ onOpen: function() { $('.myinput').blur(); } });

EDIT 2
Apparently it still has problems, sometimes myinput is focused despite the mentioned fix.
I'm looking into it to pinpoint the cause, I suspect it might be related to the virtual keyboard.

UPDATE
Eventually this undesirable behaviour looks to be only focusing related, as stated by some good folks.
This fix wasn't enough, the problem randomly popped up again:

$('.myinput').pickadate({ onOpen: function() { $('.myinput').blur(); }, onClose: function() { $('.myinput').blur(); } });

I had to enforce this code:

$('.myinput').focus(function() { $(this).blur(); } );