Skip to main content

Month/year dropdown lands on 1976 instead of the current year (WEB-1295)

Version: 0.9.0 ยท Type: ๐Ÿ› Bug Fix

WEB-1295

Problemโ€‹

Opening the month / year dropdown in the Calendar (DatePicker) always scrolled to the top of the list. For the year dropdown this meant the panel showed 1976 (the earliest year) every time, even though the currently selected year was e.g. 2026 โ€” users had to scroll all the way down to reach the current year. The month dropdown had the same latent issue.

Root Causeโ€‹

CalendarMonthCaption renders the month/year dropdowns with Radix DropdownMenu. The year list spans the current year ยฑ50 (START_YEAR = CURRENT_YEAR - 50 โ€ฆ END_YEAR = CURRENT_YEAR + 50), i.e. 101 items in a max-h-[280px] scroll container. On open, Radix focuses the first list item and scrolls it into view, so the container stayed pinned to the top (1976) and the selected year was scrolled out of sight. The component had no "scroll the selected item into view on open" logic.

Changed Filesโ€‹

  • packages/design/src/components/Calendar/CalendarMonthCaption.tsx
  • packages/design/src/components/Calendar/__tests__/Calendar.test.tsx

Changesโ€‹

  1. Tag the current month / current year DropdownMenuItemEntry with itemProps: { 'data-current': 'true' } (month by i === currentMonth, year by year === currentYear); add currentMonth to the monthItems useMemo deps.
  2. Prefix both dropdowns' contentClassName with a pd-calendar__scroll-menu marker class (the scroll container is the content wrapper carrying max-h-[280px] overflow-y-auto).
  3. Add a useEffect (deps [monthOpen, yearOpen]): when either dropdown opens, after one requestAnimationFrame (waiting for Radix's first-item autofocus + layout) it iterates .pd-calendar__scroll-menu, focuses the [data-current] item with focus({ preventScroll: true }) (moving keyboard focus off the first item), then centers it within the scroll container via a getBoundingClientRect delta applied to scrollTop only (no page scroll). The cleanup cancels the frame.
  4. Add 2 regression tests: opening the year dropdown asserts a [role="menuitem"][data-current="true"] containing 2026; opening the month dropdown asserts the current item contains Jun โ€” locking the marker contract (happy-dom cannot verify real scrolling since getBoundingClientRect returns 0).

Impactโ€‹

Every consumer of Calendar / DatePicker (via CalendarMonthCaption). Closed-dropdown visuals and behavior are unchanged; only the open month/year dropdown now centers the currently selected item. web4 consumes @plaud/design via workspace:* (source), so the fix takes effect without a release.