#8593 open bug ()

Opened September 23, 2012 03:26AM UTC

Last modified February 29, 2016 11:53AM UTC

Datepicker cannot be re-opened by clicking on the text field after using the scrollbar

Reported by: glthomas224 Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:
Description

I am re-posting this bug because I believe that it was closed in haste by scott gonzalez. I will summarize the bug again.

The bug: If the user clicks on the scroll bar of the browser then the datepicker disappears AND the text input field that has been assigned to be a datepicker will still have focus. If the user then clicks on said input field to make the datepicker reappear after their scroll action the datepicker will NOT appear, unless the user first clicks somewhere else on the page to cause the input field to lose focus. Only after the input field loses focus can the datepicker be made to reappear by clicking again on the original input field. This is clunky performance and in my opinion this is absolutely a BUG regardless of any developers opinions on whether datepicker visibility should persist throughout mouse pointer interactions with the scrollbar of a browser. If you consider how a native non jquery/javascript dropdown combobox works, if the user clicks on the combobox it opens up the container of selction options. If the user then performs a scroll action the container of selection options disappears, but then the user can immediately reopen the combobox through the very next click on the combobox rather than having to perform an unfocus event. For this reason I have recreated this ticket.

Now my opinion also is different on what the intended behavior of a datepicker control should be in regards to persistence of the datepicker upon a scroll event. I have themed my calendar to be larger than the default calendar. Consequently sometimes my users might want to scroll the calendar depending on the current size of their browser window. My opinion is that the jquery ui datepicker should perform just like the jquery ui autocomplete combobox. If the user opens the selection container on the combobox and then performs a scroll event, then the combobox selection options remain visible. I tried investigating the javascript file for the autocomplete combobox to glean ideas about how to keep the datepicker visible when the scroll bar is selected. Unfortunately, I was unable to discover the magic code that is enabling this capability within the combobox. Until a more suitable solution can be concocted users can employ my following strategy.

On line 837 of the jquery.ui.datepicker.js file there resides a function called _checkExternalClick. The last line of this function is:

$.datepicker._hideDatepicker();

This line needs to be wrapped in the following conditional statement:

if (!$target.is('html')) {
    $.datepicker._hideDatepicker();
}

Once this is done, clicking on the browser scrollbar while the datepicker is visible will not hide the datepicker. However any space on the page between the body edge and the window edge is indistinguishable from the scrollbar since that space is considered to be an object of HTMLhtmlElement. The scroll bar is also considered to be an object of HTMLhtmlElement. So by creating a div container that fills this extra space between the body edge and the window edge, then the only thing left that the user can click that is considered to be an object of HTMLhtmlElement is the scrollbar. So here is the extra code needed to do this.

After the <body> tag on your page add:

<div id="UnderMask" style="position:absolute; width:0px; height:0px;
    z-index:-10000; top:0; overflow:hidden; background-color:transparent;"></div>

In your style sheet or within your <style> tags add this:

html{overflow-x:hidden}

Finally just prior to the close </body> tag add the following script:

<script type="text/javascript">
jq171('#UnderMask').css('height', jq171(document).height() + 'px');
jq171('#UnderMask').css('width', jq171(window).width() + 'px');
jq171('#UnderMask').css('left', "0");
jq171(window).resize(function () {
    if (jq171(window).width() < jq171('body').width()) {
        jq171('html').css('overflow-x', 'scroll');
    }
    else {
        jq171('html').css('overflow-x', 'hidden');
    } 
    jq171('#UnderMask').css('width', jq171(window).width() + 'px');
});
</script>

This isnt't the most elegant of solutions but it should suffice until the the jquery ui gods can concoct a more standalone solution which doesnt require the user to add extraneous objects. Another approach might be to measure where the coordinates of the click occurred and compare that with the coordinates of the browser's scrollbar.

Please don't close this ticket until at a minimum the bug I've described is resolved, regardless of one's datepicker persistence opinions!

Attachments (0)
Change History (10)

Changed October 11, 2012 02:45PM UTC by scottgonzalez comment:1

milestone: 1.9.0 → 1.11.0

Changed October 19, 2012 04:41PM UTC by mikesherov comment:2

resolution: → duplicate
status: new → closed

Duplicate of #8592.Thanks for contributing! The maintainers of the datepicker plugin responded to your request and have said what their opinion is.

Rather than opening another ticket saying the same thing, fork the project on github.com and maintain your own fork that has the behavior that matches *your* opinion rather than their opinion.

Changed October 19, 2012 06:27PM UTC by fvox13 comment:3

The issue is not "the datepicker closes on scroll". That's fine, and I would think acceptable behavior for this plugin.

The issue is "the field with the datepicker retains focus, which prevents the datepicker from reopening until you first click somewhere else on the page." This *is* a fairly serious usability bug. Not some dude's opinion.

Changed October 19, 2012 06:37PM UTC by mikesherov comment:4

resolution: duplicate
status: closed → reopened

Thanks for clarifying and following up! I couldn't repro this issue at first because I'm on a Mac and scrollbars don't exist by default. But now I see what you're saying. Confirmed.

Changed October 19, 2012 06:38PM UTC by mikesherov comment:5

status: reopened → open

Changed May 27, 2013 02:01PM UTC by scottgonzalez comment:6

_comment0: Hi, \ \ I have added this below function its works well. thank you for your guidelines. \ \ '''file :'''jquery.ui.datepicker.js [[BR]] \ \ '''function called :''' _checkExternalClick. \ \ version "jQuery UI Datepicker 1.8.7" \ \ \ _checkExternalClick: function (a) { \ if (d.datepicker._curInst) { \ a = d(a.target), \ inst = d.datepicker._getInst(a[0]); \ /* a[0].id != d.datepicker._mainDivId && a.parents("#" + d.datepicker._mainDivId).length == 0 && !a.hasClass(d.datepicker.markerClassName) && !a.hasClass(d.datepicker._triggerClass) && d.datepicker._datepickerShowing && !(d.datepicker._inDialog && d.blockUI) && d.datepicker._hideDatepicker() */ \ if ( ( ( a[0].id !== d.datepicker._mainDivId && \ a.parents("#" + d.datepicker._mainDivId).length === 0 && \ !a.hasClass(d.datepicker.markerClassName) && \ !a.closest("." + d.datepicker._triggerClass).length && \ d.datepicker._datepickerShowing && !(d.datepicker._inDialog && d.blockUI) ) ) || \ ( a.hasClass(d.datepicker.markerClassName) && d.datepicker._curInst !== inst ) ) { \ if (!a.is('html')) { \ d.datepicker._hideDatepicker(); \ } \ } \ } \ }, \ → 1369664178745773

Hi,

I have added this below function its works well. thank you for your guidelines.

[ code deleted]

Changed May 27, 2013 02:17PM UTC by scottgonzalez comment:7

@rnrvenkat If you would like to propose a fix, please sign our CLA and send a pull request for https://github.com/jquery/jquery-ui. Thanks.

Changed June 24, 2014 11:43PM UTC by scottgonzalez comment:8

milestone: 1.11.0 → none

Changed July 14, 2014 06:40PM UTC by scottgonzalez comment:9

summary: Datepicker disappears upon scroll → Datepicker cannot be re-opened by clicking on the text field after using the scrollbar

Changed February 29, 2016 11:53AM UTC by alecpl comment:10

This has nothing to do with a scrollbar at all. Steps:

1. Goto input field, calendar appears,

2. Select a date - date will be inserted to the input, the input still has focus,

3. Now you can't open the calendar again by just clicking the input (e.g. in case you made a mistake selecting the date).

This can be simply fixed by assigning onclick event to the input, not only onfocus.