Fix year/month reset bug in DateInput

[lucasn4s]

The DateInput component had a bug where selecting a year and then a month (or vice-versa) would reset the previously selected value. This was due to the handlers relying on the currently selected date string (internalValue) as a base, which didn't reflect intermediate navigation steps.

I fixed this by:

1. Updating the navigation handlers to use the picker's internal currentDate state as the base.
2. Using Luxon's .set() method to cleanly update only the relevant part (month or year) while automatically handling day-clamping at month-ends.
3. Removing premature updates to internalValue during navigation, so the input text only changes when a day is actually picked.

Verification:

• Added a reproduction test case (manually verified).
• Ran the full test suite (196 tests passed).
• Performed frontend verification using Playwright to ensure the calendar view correctly preserves selections.

Fixes #1055

---

PR created automatically by Jules for task 1088739392285522216 started by @lucasn4s

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[lucasn4s]

Ao abrir tanto a seleção de mês quanto a de ano, é exibido sempre como se apenas o mês de janeiro e o ano de 2026 estivessem selecionados, mesmo que não estejam.

[google-labs-jules]

Ao abrir tanto a seleção de mês quanto a de ano, é exibido sempre como se apenas o mês de janeiro e o ano de 2026 estivessem selecionados, mesmo que não estejam.

Corrigido. Agora os seletores de mês e ano não exibem mais destaques de seleção por padrão (Janeiro/2026) quando nenhuma data está selecionada ou quando a navegação está em andamento. O destaque agora reflete corretamente apenas a data selecionada.

[jvictordev1]

O bug de reset do ano/mês foi corrigido, porém quando um ano ou mês é selecionado o item que representa esse dado no MonthPicker e YearPicker não fica com o highlight de seleção. Isso por que o dado que está sendo passado para ambos os componentes é o model, que só é alterado para a data que o usuário seleciona o dia do mês e ano selecionados. É esperado que, quando o usuário selecione um ano ou mês, esses itens recebam highlight em seus componentes.

Gravacao.de.tela.de.2026-02-11.08-22-53.webm

[lucasn4s]

O bug de reset do ano/mês foi corrigido, porém quando um ano ou mês é selecionado o item que representa esse dado no MonthPicker e YearPicker não fica com o highlight de seleção. Isso por que o dado que está sendo passado para ambos os componentes é o model, que só é alterado para a data que o usuário seleciona o dia do mês e ano selecionados. É esperado que, quando o usuário selecione um ano ou mês, esses itens recebam highlight em seus componentes.
Gravacao.de.tela.de.2026-02-11.08-22-53.webm

@jules

[lucasn4s]

Por padrão, o mês selecionado não vem com highlight ao abrir o monthpicker, enquanto o ano vem corretamente.

[google-labs-jules]

Por padrão, o mês selecionado não vem com highlight ao abrir o monthpicker, enquanto o ano vem corretamente.

Corrigido. Agora tanto o mês quanto o ano possuem highlight por padrão ao abrir os seletores, baseando-se na data atual de visualização do calendário. Isso garante consistência entre os dois seletores.

[tassiocaique]

@greptileai can you review the PR?

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed a critical bug where selecting a year and then a month (or vice-versa) would reset the previously selected value in the DateInput component. The root cause was that navigation handlers relied on internalValue (the displayed input text) as the source of truth, which didn't reflect intermediate navigation steps.

Key changes:

• Refactored handleMonthSelection and handleYearSelection to use currentDate.set() instead of manually parsing and reconstructing dates from internalValue
• Updated MonthSelectorGrid and YearSelectorGrid to receive pickerSelectedDate (derived from currentDate) instead of model, ensuring correct highlighting during navigation
• Changed default return values in selector grids from hardcoded defaults to null when no date is selected, preventing incorrect highlighting
• Added comprehensive tests verifying the highlight behavior works correctly with empty and provided dates

The fix properly leverages Luxon's .set() method which handles edge cases like day-clamping at month boundaries (e.g., Jan 31 → Feb 28).

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix is well-architected and addresses the root cause properly. The changes simplify the code by removing manual date parsing logic and replacing it with Luxon's built-in .set() method. Test coverage is comprehensive with new tests verifying the highlight behavior. All 196 existing tests pass, and the implementation has been verified with Playwright.
• No files require special attention

Important Files Changed

Filename	Overview
src/components/DateInput.vue	Simplified month/year selection handlers using Luxon's .set() method; replaced internalValue-based logic with currentDate-based updates
src/components/InternalComponents/MonthSelectorGrid.vue	Changed default return value from 1 to null when no date is selected, preventing incorrect highlighting
src/components/InternalComponents/YearSelectorGrid.vue	Refactored to use selectedYear from props instead of current year; properly highlights the selected year in the picker
src/tests/SelectorGridHighlight.spec.js	Added tests to verify correct highlighting behavior when selectedDate is empty or provided

Sequence Diagram

sequenceDiagram
    participant User
    participant DateInput
    participant YearPicker as YearSelectorGrid
    participant MonthPicker as MonthSelectorGrid
    
    User->>DateInput: Click year selector
    DateInput->>YearPicker: Show picker with currentDate
    YearPicker-->>YearPicker: Highlight selectedYear from currentDate
    User->>YearPicker: Select year (e.g., 2025)
    YearPicker->>DateInput: handleYearSelection(2025)
    DateInput->>DateInput: currentDate.set({ year: 2025 })
    Note over DateInput: currentDate updated, but internalValue unchanged
    
    User->>DateInput: Click month selector
    DateInput->>MonthPicker: Show picker with updated currentDate
    MonthPicker-->>MonthPicker: Highlight selectedMonth from currentDate
    User->>MonthPicker: Select month (e.g., May)
    MonthPicker->>DateInput: handleMonthSelection(May)
    DateInput->>DateInput: currentDate.set({ month: 5 })
    Note over DateInput: Month set on already-updated year
    
    User->>DateInput: Select day
    DateInput->>DateInput: Update internalValue
    DateInput-->>User: Emit formatted date

Loading