Manual text entry in Datepicker form field adds invisible element on page

[maz]

When first typing in a valid date before ever displaying the Datepicker calendar (showOn: 'button'), the Datepicker is updated behind the scenes to reflect this new date (keyup event).

Though the calendar remains invisible, this feature generates markup which occupies room at the bottom of the page, extending it significantly.

This problem does not occur after you have shown and hidden the calendar, since it is then properly hidden.

The easy solution is to make sure the Datepicker div is invisible at startup, by simply hiding it at the end of the object initializer:

function Datepicker() {
   ...
   this.dpDiv.hide();
}

Until this is fixed, you can call the following after the Datepicker behavior has been added to your fields:

$.datepicker.dpDiv.hide();

I am attaching two files to help easily reproduce the issue:

TestDatePicker.html​

This will create the behavior. The difference will only be visible if you have a small enough window, since scroll bars will appear. Go into the date input field and press [Shift] or [Ctrl] to trigger this.

TestDatePickerFrame.html​

Wraps the other file into an iframe so you don't have to play with window size to reproduce the issue.

This was introduced by changes for #3861. #5970 could be related, though the suggested solution there introduced other issues for me.

[maz]

File to reproduce the bug on keyup event

[maz]

Wrapper to help better see the issue without having to fiddle with browser size

[kbwood]

Or you can hide it using CSS:

#ui-datepicker-div { display: none; }

[maz]

Here is a new set of files with a different solution. Testing in MSIE 7 indicates the above solutions (Javascript and CSS) do not work, since they introduce grayed-out scroll bars into the frame.

I opted for this instead:

    $('#dateField').unbind('keyup').keyup(function() {
        if ($.datepicker._datepickerShowing) {
            $.datepicker._doKeyUp({ target: this });
        }
    });

This additional check should be built into the Keyup handler set up by Datepicker. I don't see a need to update the calendar on "keyup", if the calendar is not shown.

See all three versions on ​this page.

The first frame implements no special behavior. The second frame uses the CSS in the above comment. The third version overrides the keyup event. Test this using MSIE 7 (I am not able to test with MSIE 8 at this time), by going into the text field of each frame, and hitting the [Ctrl] key.

Note that it's probably a good idea to hide the div in any case.

[maz]

Here is a new set of files with a different solution. Testing in MSIE 7 indicates the above solutions (Javascript and CSS) do not work, since they introduce grayed-out scroll bars into the frame.

I opted for this instead:

    $('#dateField').unbind('keyup').keyup(function() {
        if ($.datepicker._datepickerShowing) {
            $.datepicker._doKeyUp({ target: this });
        }
    });

This additional check should be built into the Keyup handler set up by Datepicker. I don't see a need to update the calendar on "keyup", if the calendar is not shown.

See all three versions on ​this page.

The first frame implements no special behavior. The second frame uses the CSS in the above comment. The third version overrides the keyup event. Test this using MSIE 7 (I am not able to test with MSIE 8 at this time), by going into the text field of each frame, and hitting the [Ctrl] key.

Note that it's probably a good idea to hide the div in any case.

[mikesherov]

This was fixed in 1.8.7 with CSS: ​http://jsfiddle.net/vv2Df/1/

[mikesherov]

Duplicate of #4111.