Skip to content

DateTimePicker: Infinite scroll for faster date/time selection#1280

Merged
mstijak merged 4 commits into
codaxy:feat/master/litmus-tsfrom
pili01:fix/litmus-ts/date-time-picker-improvements
May 19, 2026
Merged

DateTimePicker: Infinite scroll for faster date/time selection#1280
mstijak merged 4 commits into
codaxy:feat/master/litmus-tsfrom
pili01:fix/litmus-ts/date-time-picker-improvements

Conversation

@pili01
Copy link
Copy Markdown

@pili01 pili01 commented Feb 2, 2026

This PR introduces infinite scrolling to the DateTimePicker component for both date and time columns.
The goal is to significantly improve the user experience when selecting values across large ranges (months, days, hours, minutes) by removing hard list boundaries and minimizing repetitive scrolling.

@pili01 pili01 requested a review from ognjenst February 2, 2026 08:49
Comment thread packages/cx/src/widgets/form/DateTimePicker.tsx
Comment thread packages/cx/src/widgets/form/DateTimePicker.tsx Outdated
pili01 and others added 3 commits February 2, 2026 16:14
Addresses review feedback on the infinite-scroll wheels:

- Replace the XOR wrap-detection (only valid for single-step scrolls,
  misfires on multi-step touch jumps) with a direct check: recentre the
  wheel when a scroll lands outside the centre range of the 3x buffer.
- buildNumberWheel() builds uniform, symmetric 3x buffers for the day,
  hour and minute wheels (previously 41/52/130 with thin trailing room).
- year/month onChange now read the setState updater's `state` argument
  instead of `this.state`, consistent with the other wheels.
- Track the first year in a `firstYear` field instead of reading it back
  from a rendered span's React key.
- Pad option labels with String.padStart; remove the dead `??=` on
  numberOfDaysInMonth.
Replaces the per-wrap remount, which interrupted the scroll at every
boundary, with seamless wrapping.

WheelComponent gains a `cycle` flag: when set it renders the option list
WHEEL_BUFFER_COPIES (3) times and, on prop updates, snaps to whichever
copy of the value is nearest its current position. A wrap then scrolls
one item into the adjacent identical copy — no remount and no scrollTop
adjustment, so the motion is never interrupted.

DateTimePicker passes the natural single option list plus the `cycle`
flag, and drops the resetKey state entirely.
@mstijak mstijak merged commit 2431381 into codaxy:feat/master/litmus-ts May 19, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants