jquery / jquery-ui

The official jQuery user interface library.
https://jqueryui.com
Other
11.26k stars 5.32k forks source link

Rounding error in datepicker _checkOffset() #2017

Open janis-ps opened 2 years ago

janis-ps commented 2 years ago

We encountered a problem where the datepicker position would be incorrect for a date input inside a Bootstrap modal. The datepicker would end up offscreen, far below the actual input element.

The culprit was this line of code (as well as the line above it):

https://github.com/jquery/jquery-ui/blob/main/ui/widgets/datepicker.js#L931

This code uses strict equality (===) to compare two floating-point numbers; not pixels, but fractions of pixels. Here's how we fixed it (and how the line above it should be fixed):

                offset.left -= ( this._get( inst, "isRTL" ) ? ( dpWidth - inputWidth ) : 0 );
                offset.left -= ( isFixed && offset.left === inst.input.offset().left ) ? $( document ).scrollLeft() : 0;
-               offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;
+               offset.top -= ( isFixed && Math.floor(offset.top) === Math.floor( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;

                // Now check if datepicker is showing outside window viewport - move to a better place if so.
                offset.left -= Math.min( offset.left, ( offset.left + dpWidth > viewWidth && viewWidth > dpWidth ) ?
fgerodez commented 1 year ago

Encountered this as well in 1.13.1

Applied the patch and it solved the issue, thanks