From 6a2872c7c675161e0d7d2877e591068765c9de16 Mon Sep 17 00:00:00 2001
From: Jacob Thomason
Date: Thu, 13 Mar 2025 22:52:32 -0400
Subject: [PATCH 1/2] Fixed datepicker positioning calculation
See #2057. This still needs merging.
---
ui/widgets/datepicker.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js
index 029f255e87..921f59a680 100644
--- a/ui/widgets/datepicker.js
+++ b/ui/widgets/datepicker.js
@@ -816,7 +816,7 @@ $.extend( Datepicker.prototype, {
}
if ( !$.datepicker._pos ) { // position below input
$.datepicker._pos = $.datepicker._findPos( input );
- $.datepicker._pos[ 1 ] += input.offsetHeight; // add the height
+ $.datepicker._pos[ 1 ] += inst.input.outerHeight(); // add the height
}
isFixed = false;
From 3196aa08e731058d3c7f76c5100b05d04bf3e989 Mon Sep 17 00:00:00 2001
From: Jacob Thomason
Date: Wed, 26 Mar 2025 17:07:56 -0400
Subject: [PATCH 2/2] Datepicker: Added test to ensure proper positioning of
datepicker
---
tests/unit/datepicker/core.js | 79 +++++++++++++++++++++++++++++++++++
1 file changed, 79 insertions(+)
diff --git a/tests/unit/datepicker/core.js b/tests/unit/datepicker/core.js
index edc16d005d..5073ad68c7 100644
--- a/tests/unit/datepicker/core.js
+++ b/tests/unit/datepicker/core.js
@@ -540,4 +540,83 @@ QUnit.test( "mouse", function( assert ) {
"Mouse click inline - next" );
} );
+QUnit.test( "position", function( assert ) {
+ assert.expect( 4 );
+
+ var $container = $( "#qunit-fixture" ),
+ $modal = $container.children('div'),
+ $inputOne = testHelper.init( "#inp" ),
+ $inputTwo = testHelper.init( "#alt" );
+
+ // Undo the weird positioning on the container
+ $container.css({
+ position: "static",
+ top: 0,
+ left: 0,
+ height: "5000px",
+ });
+
+ // Position the modal in the middle of the screen
+ $modal.css({
+ display: "none", // Initially must be hidden
+ position: "fixed",
+ "overflow": "hidden auto",
+ top: "50%",
+ left: "50%",
+ right: "auto",
+ width: "500px",
+ height: "500px",
+ marginTop: "-100px",
+ marginLeft: "-100px"
+ });
+
+ // Add an internal wrapper around all the children nodes
+ $modal.wrapInner(``)
+ var $wrapper = $modal.children('#relative-wrapper');
+ $wrapper.prepend(``);
+
+ // Wrap inputs with a container
+ $inputOne.wrap(``);
+ $inputTwo.wrap(``);
+
+ assert.ok( $modal.is(":hidden"), "Modal is hidden" );
+
+ // Set the page scroll position way down the page
+ var done = assert.async();
+ $(document).ready(function() {
+ $(window).scrollTop(2000);
+
+ // Disable the scrollbar
+ $('body').css('overflow', 'hidden');
+
+ // Now show the wrapper with the input
+ $modal.show();
+
+ // Initialize datepickers
+ $modal.find('input').datepicker();
+
+ setTimeout(() => {
+ $("#input-one-container").hide();
+ $("#input-two-container").css("padding-top", "100px");
+
+ var $inputTwo = $("#input-two-container").find("input");
+
+ $inputTwo.focus();
+ assert.ok( $("#ui-datepicker-div").is(":visible"), "Datepicker is visible" );
+ done();
+
+ // Get the top position of the input and compare it to the datepicker to ensure they're
+ // both positioned correctly
+ var inputTop = $inputTwo.offset().top;
+ var dpTop = $("#ui-datepicker-div").offset().top;
+ assert.ok( Math.abs(inputTop - dpTop) < 25, "Datepicker is positioned correctly" );
+
+ // It should also be left aligned with the input
+ var inputLeft = $inputTwo.offset().left;
+ var dpLeft = $("#ui-datepicker-div").offset().left;
+ assert.ok( Math.abs(inputLeft - dpLeft) < 5, "Datepicker is left aligned with the input" );
+ }, 200);
+ });
+} );
+
} );