amsul / amsul/pickadate.js

iPad - Datepicker disappears when year/month is selected

Open
#877 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
981
PR merge metrics
No merged PRs in 30d

Description

This issue is separate from #735, and is affecting iPad. I do not have an iPhone on which to test, but I believe this issue would affect all of iOS 9. My version of iOS is 9.3.2.

The issue is that, when the month and year dropdown selection is enabled, the datepicker gui disappears when either a month or year is selected from the dropdown. When the user scrolls and the scrolling ends, the gui reappears. I've checked in my debugger, and the DOM nodes don't disappear and are not hidden via any CSS or styling, they simply don't render on the page.
The theme I am using is "default". I tried all the listed remedies for issue #735, but none of them worked. I tried on both Safari and Chrome on the iPad, and the problem persisted for both browsers.
I went to the pickadate home page http://amsul.ca/pickadate.js/date/ and was able to recreate the problem there with the example on which the Select Year and Select Month options were true.

The workaround I've adopted is to add a manual call to window.scrollBy in the render event handler. However, it needs to be delayed (probably due to screen refresh rates) in order to take effect. If I were to guess, I would speculate that the iPad's webkit rendering system has a bug and I'm forcing it to re-render the screen by scrolling. But I'm honestly not sure and don't have time to delve into the specifics of webkit.

Here's my workaround:

Below code starts at line 119 of picker.date.js

``` Javascript
picker.
on( 'render', function() {
picker.$root.find( '.' + settings.klass.selectMonth ).on( 'change', function() {
var value = this.value
if ( value ) {
picker.set( 'highlight', [ picker.get( 'view' ).year, value, picker.get( 'highlight' ).date ] )
picker.$root.find( '.' + settings.klass.selectMonth ).trigger( 'focus' )
}
})
picker.$root.find( '.' + settings.klass.selectYear ).on( 'change', function() {
var value = this.value
if ( value ) {
picker.set( 'highlight', [ value, picker.get( 'view' ).month, picker.get( 'highlight' ).date ] )
picker.$root.find( '.' + settings.klass.selectYear ).trigger( 'focus' )
}
})
/*
**Below delays the scroll operations. Scrolls down first after a delay.
**Then, delays further and scrolls up. These two scrolls ensure that, assuming the page
**has room to scroll, a frame refresh will register either a scroll up or down.
**If the page is too small to scroll, this workaround will not work.
*/
window.setTimeout(function(){
window.scrollBy(0,10);
window.setTimeout(function(){
window.scrollBy(0,-10);
},500);
},500);
}, 1 )
```

Any relief for this bug? Otherwise, hopefully others find the above useful if they've run into the same issue!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.