Rounding error in datepicker _checkOffset()
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.3k
- Forks
- 5.2k
- PR merge metrics
- No merged PRs in 30d
Description
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 ) ?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at ui/widgets/datepicker.js around _checkOffset() and the referenced line near 931. Inspect the two strict floating-point comparisons involved in positioning a datepicker inside a Bootstrap modal, then verify the datepicker remains aligned with its input instead of moving offscreen when fractional offsets occur.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100