Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#31,416 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

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

調査の方向性

ion-datetime の initializeCalendarListener と getChangedMonth の実装を見つけ、次に、カレンダー本体にレイアウトがない状態で、提供された date-time マークアップを使って問題を再現します。debounced な scroll パスと forceRenderDate のフローを、animateToDate の promise を含めて確認します。非表示または再表示されたカレンダー本体によって workingParts が変更されず、強制された日付アニメーションが引き続き完了してその状態をクリアすれば完了です。

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

説明

triage
Prerequisites
  • I have read the Contributing Guidelines.
  • I agree to follow the Code of Conduct.
  • 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

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: <ion-datetime presentation="date-time" value="2026-04-28T10:00:00"></ion-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:

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.

主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 20時間
マージ済み PR（30日）
70

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ionic-team/ionic-framework のほかの issue

ionic-team/ionic-framework の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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