From c7c649117567bf38f59fe3909c778a6b7dd9e346 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Sun, 21 Jun 2026 15:01:08 +0200 Subject: [PATCH] feat(date-range-filter): clamp typed digits per part with smart advance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Typed digits in the segmented date field were unvalidated — you could enter 60 for a day or 30 for a month. Now each digit is clamped to its part's range and auto-advances: - A digit that cannot validly extend the current part commits as a zero-padded value and moves to the next part (month 9 → 09▶, day 6 → 06▶). - An ambiguous digit that could still take a second stays pending (month 1 → 01; then 2 → 12▶, or 9 → 09▶ dropping the overflowed 1). - Day/month show a pending single digit zero-padded; the year part keeps its existing right-fill placeholder display and 4-digit advance. Logic lives in a pure applyDigit() helper; completion is normalized to a full-width buffer so syncHiddenFromSegments commits it. Adds 10 e2e tests covering clamping, auto-advance, overflow-drop, zero-pad display, the single-digit commit invariant, and restart-on-full. Co-Authored-By: Claude Opus 4.8 (1M context) --- e2e/test_date_range_picker_e2e.py | 133 ++++++++++++++++++++++++++++++ ts/elements/date-range-picker.ts | 53 ++++++++++-- 2 files changed, 179 insertions(+), 7 deletions(-) diff --git a/e2e/test_date_range_picker_e2e.py b/e2e/test_date_range_picker_e2e.py index 7e5ae9f..95b1caa 100644 --- a/e2e/test_date_range_picker_e2e.py +++ b/e2e/test_date_range_picker_e2e.py @@ -458,3 +458,136 @@ def test_ctrl_arrow_does_not_change_value(live_server, page): page.keyboard.press("ArrowUp") page.keyboard.up("Control") assert day_segment.input_value() == "15" + + +# ── Digit clamping & auto-advance ─────────────────────────────────────────── + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_month_high_digit_autoadvances_zero_padded(live_server, page): + """A digit that cannot lead a valid month commits zero-padded and advances.""" + page.goto(live_server.url + "/test-date-range-picker/") + month_segment = _segment(page, "min", "month") + month_segment.click() + page.keyboard.press("9") + assert month_segment.input_value() == "09" + expect(_segment(page, "min", "year")).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_month_one_stays_then_two_completes(live_server, page): + page.goto(live_server.url + "/test-date-range-picker/") + month_segment = _segment(page, "min", "month") + month_segment.click() + page.keyboard.press("1") + assert month_segment.input_value() == "01" + expect(month_segment).to_be_focused() # ambiguous: could become 10/11/12 + page.keyboard.press("2") + assert month_segment.input_value() == "12" + expect(_segment(page, "min", "year")).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_month_one_then_nine_drops_overflow(live_server, page): + """1 then 9 (19 > 12) drops the leading 1 and commits 09.""" + page.goto(live_server.url + "/test-date-range-picker/") + month_segment = _segment(page, "min", "month") + month_segment.click() + page.keyboard.press("1") + page.keyboard.press("9") + assert month_segment.input_value() == "09" + expect(_segment(page, "min", "year")).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_day_high_digit_autoadvances(live_server, page): + page.goto(live_server.url + "/test-date-range-picker/") + day_segment = _segment(page, "min", "day") + day_segment.click() + page.keyboard.press("6") + assert day_segment.input_value() == "06" + expect(_segment(page, "min", "month")).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_day_three_then_two_overflows_to_pending_two(live_server, page): + """3 stays (30/31 possible); 2 (32 > 31) drops to a pending 02, still day.""" + page.goto(live_server.url + "/test-date-range-picker/") + day_segment = _segment(page, "min", "day") + day_segment.click() + page.keyboard.press("3") + assert day_segment.input_value() == "03" + expect(day_segment).to_be_focused() + page.keyboard.press("2") + assert day_segment.input_value() == "02" + expect(day_segment).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_leading_zero_then_digit_on_day(live_server, page): + page.goto(live_server.url + "/test-date-range-picker/") + day_segment = _segment(page, "min", "day") + day_segment.click() + page.keyboard.press("0") + assert day_segment.input_value() == "00" + expect(day_segment).to_be_focused() + page.keyboard.press("9") + assert day_segment.input_value() == "09" + expect(_segment(page, "min", "month")).to_be_focused() + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_double_zero_day_does_not_commit(live_server, page): + """Day 00 is a complete-but-invalid part, so the side stays uncommitted.""" + page.goto(live_server.url + "/test-date-range-picker/") + _segment(page, "min", "day").click() + page.keyboard.type("00032024") # day=00, month=03, year=2024 + assert _segment(page, "min", "day").input_value() == "00" + assert page.locator(HIDDEN_MIN).input_value() == "" + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_year_pending_still_right_fills(live_server, page): + """Year keeps the right-fill placeholder display under the new logic.""" + page.goto(live_server.url + "/test-date-range-picker/") + year_segment = _segment(page, "min", "year") + year_segment.click() + page.keyboard.press("1") + assert year_segment.input_value() == "YYY1" + page.keyboard.press("9") + assert year_segment.input_value() == "YY19" + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_single_high_digit_commits_when_other_parts_present(live_server, page): + """An auto-advanced single digit is a complete part, so it commits the ISO.""" + page.goto(live_server.url + "/test-date-range-picker/") + _segment(page, "min", "day").click() + page.keyboard.type("15") # day=15 → advances to month + _segment(page, "min", "year").click() + page.keyboard.type("2024") # year=2024 + _segment(page, "min", "month").click() + page.keyboard.press("9") # month=09 (auto-advance) + assert page.locator(HIDDEN_MIN).input_value() == "2024-09-15" + + +@pytest.mark.django_db +@override_settings(ROOT_URLCONF="e2e.test_date_range_picker_e2e") +def test_retype_full_part_restarts(live_server, page): + page.goto(live_server.url + "/test-date-range-picker/") + day_segment = _segment(page, "min", "day") + day_segment.click() + page.keyboard.type("15") # advances to month + day_segment.click() + page.keyboard.press("3") + assert day_segment.input_value() == "03" + expect(day_segment).to_be_focused() diff --git a/ts/elements/date-range-picker.ts b/ts/elements/date-range-picker.ts index 1404271..6b0ce95 100644 --- a/ts/elements/date-range-picker.ts +++ b/ts/elements/date-range-picker.ts @@ -154,6 +154,36 @@ function partRange(datePart: string): PartRange { return { min: 1, max: 31, empty: 1 }; // day } +interface DigitEntry { + buffer: string; + complete: boolean; +} + +// Fold a freshly typed digit into a part's buffer, clamping to the part's max +// and deciding whether to auto-advance. A digit that cannot validly extend the +// current value (e.g. 9 into a ≤12 month, or a second digit pushing past the +// max) commits as a zero-padded single digit and completes; an ambiguous digit +// that could still take another (month 1 → 10/11/12) stays pending. +// +// Invariant: complete === true MUST imply buffer.length === width, because +// syncHiddenFromSegments re-derives completeness from buffer length — that is +// why a completing single digit is padded to full width before returning. +function applyDigit( + buffer: string, + digit: string, + width: number, + max: number +): DigitEntry { + if (buffer.length >= width) buffer = ""; // restart an already-full part + let candidate = buffer + digit; + if (parseInt(candidate, 10) > max) candidate = digit; // overflow → fresh ones digit + const value = parseInt(candidate, 10); + // Strict >: value*10 <= max means another digit could still land in range. + const complete = candidate.length === width || value * 10 > max; + if (complete) candidate = padNumber(value, width); + return { buffer: candidate, complete }; +} + function setSegmentBuffer(segment: HTMLInputElement, buffer: string): void { segment.dataset.typedDigits = buffer; if (buffer === "") { @@ -161,8 +191,13 @@ function setSegmentBuffer(segment: HTMLInputElement, buffer: string): void { return; } const placeholder = segment.getAttribute("placeholder") ?? ""; - // Fill the placeholder from the right: typing 19 into YYYY shows YY19. - segment.value = placeholder.slice(0, placeholder.length - buffer.length) + buffer; + if (segment.dataset.datePart === "year") { + // Fill the placeholder from the right: typing 19 into YYYY shows YY19. + segment.value = placeholder.slice(0, placeholder.length - buffer.length) + buffer; + } else { + // Day/month show a pending single digit zero-padded: typing 1 shows 01. + segment.value = buffer.padStart(placeholder.length, "0"); + } } function segmentsForSide(picker: HTMLElement, side: string): HTMLInputElement[] { @@ -278,13 +313,17 @@ function initField(picker: HTMLElement, calendarState: CalendarState): void { } event.preventDefault(); if (!/^[0-9]$/.test(event.key)) return; // only numbers can be typed - const maximumLength = parseInt(segment.getAttribute("maxlength") ?? "", 10); - let buffer = segmentBuffer(segment); - // Typing into an already-full part starts it over. - buffer = buffer.length >= maximumLength ? event.key : buffer + event.key; + const width = parseInt(segment.getAttribute("maxlength") ?? "", 10); + const max = partRange(segment.dataset.datePart ?? "").max; + const { buffer, complete } = applyDigit( + segmentBuffer(segment), + event.key, + width, + max + ); setSegmentBuffer(segment, buffer); syncHiddenFromSegments(picker, segment.dataset.dateSide ?? ""); - if (buffer.length === maximumLength && segmentIndex + 1 < segments.length) { + if (complete && segmentIndex + 1 < segments.length) { segments[segmentIndex + 1].focus(); } });