Ticket #6042 (closed bug: duplicate)

Opened 4 years ago

Last modified 18 months ago

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:
Blocking: Blocked by:

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:

TestDatePicker.html Download
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 Download
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

TestDatePicker.html Download (1.2 KB) - added by maz 4 years ago.
File to reproduce the bug on keyup event
TestDatePickerFrame.html Download (904 bytes) - added by maz 4 years ago.
Wrapper to help better see the issue without having to fiddle with browser size

Change History

Changed 4 years ago by maz

File to reproduce the bug on keyup event

Changed 4 years ago by maz

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

comment:1 Changed 4 years ago by kbwood

Or you can hide it using CSS:

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

comment:2 Changed 3 years ago by 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.

comment:3 Changed 3 years ago by maz

-

Last edited 3 years ago by maz (previous) (diff)

comment:4 Changed 19 months ago by scott.gonzalez

  • Milestone changed from TBD to 1.11.0

comment:5 Changed 18 months ago by mikesherov

  • Status changed from new to closed
  • Resolution set to fixed
  • Milestone changed from 1.11.0 to 1.8.7

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

comment:6 Changed 18 months ago by mikesherov

  • Status changed from closed to reopened
  • Resolution fixed deleted
  • Milestone 1.8.7 deleted

comment:7 Changed 18 months ago by mikesherov

  • Status changed from reopened to closed
  • Resolution set to duplicate

Duplicate of #4111.

Note: See TracTickets for help on using tickets.