ionic-team / ionic-team/ionic-framework

bug: ion-datetime walks workingParts back a month when the calendar body has no layout

オープン
#31,416 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
triage
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem.

### Ionic Framework Version

v8.8.19 (also present in 8.8.9; unaffected by #31335 in 8.8.18)

### Current Behavior

`initializeCalendarListener`'s scroll handler infers the displayed month from the calendar body's
geometry, and `getChangedMonth` runs even when the body has no layout at all — while
`:host(.show-month-and-year) .calendar-body { display: none }` applies, or while the host overlay is
hidden. Every box then measures 0, and the handler's own test

```ts
const startMonth = (isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2)
? months[0] : months[2];
```

reads `scrollLeft === 0` as "the user has scrolled to the previous month". `Math.abs(rect.x - box.x) > 2`
does not filter it out either, because with no layout both rects are zero and the difference is 0.

So merely opening the month/year wheel can move `workingParts` back a month. It is user-visible
immediately: the wheel columns are bound to `workingParts`, so the month the wheel displays drifts
backwards from the one the user was looking at, and any subsequent commit uses the drifted value.

The 50 ms scroll debounce is what makes this intermittent rather than constant — measured in a
headless Chrome harness, it reproduces in roughly four runs out of five.

### Expected Behavior

A calendar body with no layout has no meaningful scroll position, so it should not drive a month
change. Hiding and re-showing the grid should leave `workingParts` untouched.

### Steps to Reproduce

1. Render a bare datetime: ``
2. Tap the **previous month** arrow a few times — say until the header reads **November 2025**.
3. Tap the header to open the month/year wheel.
4. Wait ~300 ms and read the month column / header.

**Actual:** the month drifts backwards (November → October, and further on repeat opens).
**Expected:** it stays on November 2025.

Repeat a few times if it doesn't show on the first attempt — see the debounce note above.

### Additional Information

A guard on the first statement of `getChangedMonth` fixes it:

```ts
const getChangedMonth = (parts: DatetimeParts): DatetimeParts | undefined => {
if (calendarBodyRef.clientWidth === 0 && this.forceRenderDate === undefined) return;
// ...
```

**The `forceRenderDate` half is not defensive noise, and an unconditional early return is a trap.**
`animateToDate` sets `forceRenderDate`, awaits a promise that only `updateActiveMonth` resolves, and
clears `forceRenderDate` afterwards. Returning early unconditionally strands that promise for the
lifetime of the component: `forceRenderDate` never clears, so every later scroll takes
`getChangedMonth`'s forced-date branch and commits a stale date. Reading `this.forceRenderDate` at
callback time (not destructuring it alongside `calendarBodyRef`/`months` at listener-init time) is
also required, or the guard captures `undefined` once and is permanently true.

We carry this as a `patch-package` patch locally and would be happy to open a PR.

Related: the calendar header and the day grid can also disagree for a different reason — the header
renders from `workingParts` synchronously while the 3-pane carousel is re-centred only by that same
debounced listener, so tapping the arrows faster than it settles leaves them out of sync. Separate
from this issue; happy to file it if useful.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Locate ion-datetime's initializeCalendarListener and getChangedMonth implementations, then reproduce the issue with the provided date-time markup while the calendar body has no layout. Check the debounced scroll path and the forceRenderDate flow, including animateToDate's promise. Done means hidden or re-shown calendar bodies leave workingParts unchanged while forced date animation still completes and clears its state.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
72/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。