#6042 closed bug (duplicate)

Opened September 09, 2010 07:39PM UTC

Closed October 18, 2012 05:23PM UTC

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

Reported by: maz Owned by:
Priority: minor Milestone:
Component: ui.datepicker Version: 1.8.4
Keywords: Cc:
Blocked by: Blocking:
Description

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:

[attachment: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.

[attachment: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.

Attachments (2)
  • TestDatePicker.html (1.2 KB) - added by maz September 09, 2010 07:40PM UTC.

    File to reproduce the bug on keyup event

  • TestDatePickerFrame.html (0.9 KB) - added by maz September 09, 2010 07:41PM UTC.

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

Change History (7)

Changed September 15, 2010 10:53PM UTC by kbwood comment:1

Or you can hide it using CSS:

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

Changed November 19, 2010 06:33PM UTC by maz comment:2

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:

#!js
    $('#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.

Changed November 19, 2010 06:36PM UTC by maz comment:3

_comment0: 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: \ \ {{{ \ #!js \ $('#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 [http://jsbin.com/uteze4 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. → 1290191861080504

-

Changed October 11, 2012 09:04PM UTC by scottgonzalez comment:4

milestone: TBD → 1.11.0

Changed October 18, 2012 05:22PM UTC by mikesherov comment:5

milestone: 1.11.0 → 1.8.7
resolution: → fixed
status: new → closed

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

Changed October 18, 2012 05:23PM UTC by mikesherov comment:6

milestone: 1.8.7
resolution: fixed
status: closed → reopened

Changed October 18, 2012 05:23PM UTC by mikesherov comment:7

resolution: → duplicate
status: reopened → closed

Duplicate of #4111.