datepicker: ui-datepicker-div always visible after init

[rickhurkens]

Versions:

• jQuery 3.6.1
• jquery ui 1.13.2

Prerequisites:

• css applied:
  .ui-datepicker { border: 1px solid #ccc; padding: 6px;

Reproduction path:

• Initialize datepicker on input field

Expected behavior:

• .ui-datepicker div is not visible

Current behavior:

• .ui-datepicker div is visible, causing a small box to appear at the bottom of the page

Discussion:

• The div is only visible after initialization and before the first time showing the widget. After hiding the widget, datepicker applies style display: none to the div.
• This can't be fixed by adding display: none to the class ourselves, because the code to show the widget does not apply a different display value in-line. It just removes the display: none inline style. Thus, applying display: none in our css results in the widget never being shown.
• My conclusion: jquery-ui should set display: none on initialisation.

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, can you prepare a test case on JS Bin or a similar platform?

[rickhurkens]

Hi mgol,

Yes, the issue also exists when using jQuery UI 1.12.1. I have created a codepen test-case and tested it with both versions. The test-case is here: https://codepen.io/rickhurkens/pen/gOjxKeo

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.