fix(TimeField,DateField): avoid changing focus prematurely with previous segment value of 0 by zomakus · Pull Request #2568 · unovue/reka-ui

zomakus · 2026-04-03T09:18:26Z

🔗 Linked issue

❓ Type of change

📖 Documentation (updates to the documentation, readme or JSdoc annotations)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

In updateHour and updateMinuteOrSecond functions the props.lastKeyZero value was not being resetted when changing focus, it has been fixed so that context is always clean when starting to work on a segment.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

Summary by CodeRabbit

Bug Fixes
- Fixed focus state management in date and time input fields to prevent premature segment switching and ensure proper focus handling when users enter zero values during keyboard input.
Tests
- Added comprehensive test coverage validating focus behavior and segment navigation across date and time input fields when entering zero values.

…t value of 0

coderabbitai · 2026-04-03T09:18:39Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 47e06e43-4d46-46f1-b42f-1e41cd596325

📥 Commits

Reviewing files that changed from the base of the PR and between 8534240 and 8f1eb06.

📒 Files selected for processing (1)

packages/core/src/DateField/DateField.test.ts

📝 Walkthrough

Walkthrough

Fixes a focus-navigation bug in date/time field segments by clearing the lastKeyZero flag when detecting focus state transitions within numeric input update flows for day, month, hour, minute, and second segments. Adds test coverage for the scenario where typing 0 then tabbing away no longer triggers premature focus changes.

Changes

Cohort / File(s)	Summary
Core Logic Fix `packages/core/src/shared/date/useDateField.ts`	Clears `lastKeyZero` flag alongside `hasLeftFocus` in three numeric input update methods (`updateDayOrMonth`, `updateMinuteOrSecond`, `updateHour`) to prevent stale flag state after focus transitions.
Test Coverage `packages/core/src/TimeField/TimeField.test.ts`, `packages/core/src/DateField/DateField.test.ts`	Adds dual test cases verifying that typing `0` followed by TAB does not prematurely advance focus, and that re-entering the segment with a different digit maintains proper focus behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

fix(TimeField): prioritize hourCycle prop over locale for 12/24h detection #2464: Also modifies numeric input handling in useDateField.ts with focus on hour-segment update logic.
unovee/reka-ui#2421: Modifies focus-out behavior flags in useDateField that directly relate to this focus-state clearing pattern.
fix (TimeField): call to updateHour to handle 12 hour time #2254: Touches the same numeric input handling logic in useDateField.ts within the hour update flow.

Suggested reviewers

epr3

Poem

🐰 A zero that wasn't the problem at all,
Just a flag left behind after focus would fall,
Now cleared with precision, the segments behave,
No premature hops—focus stays where you crave! 🎯

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing premature focus changes in TimeField and DateField when a segment's previous value was 0.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#2567` by clearing lastKeyZero in updateDayOrMonth, updateMinuteOrSecond, and updateHour functions, and includes regression tests covering the premature-focus scenario for both TimeField and DateField segments.
Out of Scope Changes check	✅ Passed	All changes directly address the linked issue: useDateField.ts fixes the bug, and test files add regression tests for the premature-focus behavior. No unrelated changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

packages/core/src/shared/date/useDateField.ts (1)
368-371: Apply the same reset in day/month to avoid stale zero-state there too.

updateDayOrMonth resets hasLeftFocus/prev but not lastKeyZero; this leaves parity gap versus the updated time paths and can still trigger early segment advance after refocus.
Suggested parity patch
   if (props.hasLeftFocus.value) {
     props.hasLeftFocus.value = false
+    props.lastKeyZero.value = false
     prev = null
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/core/src/shared/date/useDateField.ts` around lines 368 - 371, In
updateDayOrMonth (in useDateField.ts) the block that clears
props.hasLeftFocus.value and prev must also reset lastKeyZero to match the
time-path behavior; update the branch where props.hasLeftFocus.value is set to
false (the same spot that sets prev = null) to also set lastKeyZero = false (or
its equivalent reactive ref reset) so day/month doesn't retain a stale zero
state and prematurely advance segments after refocus.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/core/src/shared/date/useDateField.ts`:
- Around line 368-371: In updateDayOrMonth (in useDateField.ts) the block that
clears props.hasLeftFocus.value and prev must also reset lastKeyZero to match
the time-path behavior; update the branch where props.hasLeftFocus.value is set
to false (the same spot that sets prev = null) to also set lastKeyZero = false
(or its equivalent reactive ref reset) so day/month doesn't retain a stale zero
state and prematurely advance segments after refocus.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b7d1c481-04a3-4a00-b782-8b8fa89ccf12

📥 Commits

Reviewing files that changed from the base of the PR and between 1eb104f and 1c5ded6.

📒 Files selected for processing (1)

packages/core/src/shared/date/useDateField.ts

pkg-pr-new · 2026-04-04T14:13:29Z

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2568

commit: 8f1eb06

zernonia · 2026-04-04T14:29:34Z

Thanks for the fix! The root cause diagnosis is correct and the changes in updateHour and updateMinuteOrSecond are the right approach.

One thing worth addressing in this same PR: updateDayOrMonth has the identical hasLeftFocus reset block but is missing the same lastKeyZero reset. The bug is reproducible there too — type 0 in a month/day segment, navigate away, return, then type a non-zero digit and focus jumps prematurely.

The fix would be one additional line at useDateField.ts ~L368:

if (props.hasLeftFocus.value) {
  props.hasLeftFocus.value = false
  props.lastKeyZero.value = false  // add this
  prev = null
}

Also, a regression test covering the scenario (segment value is 0 → leave → return → type non-zero → verify focus stays) would help prevent this from regressing. The existing test style in TimeField.test.ts and DateField.test.ts should be easy to follow.

…ent value of 0

…nt value of 0

zomakus · 2026-04-05T16:25:27Z

I've added the test cases and extended the fix to the DateField component as requested.

While adding the tests I noticed a related issue, when using a 12 hour locale the hour segment doesn't change focus when pressing the 0 key more than once, it doesn't seem like its intended... Since the root cause has nothing to do with the current issue I'll address it in another PR if thats ok.

zernonia · 2026-04-06T09:30:49Z

LGTM! Thanks @zomakus !

fix(TimeField): avoid changing focus prematurely with previous segmen…

1c5ded6

…t value of 0

coderabbitai Bot reviewed Apr 3, 2026

View reviewed changes

zomakus added 2 commits April 5, 2026 18:00

test(TimeField): add test to prevent premature focus change with segm…

a0cb5f3

…ent value of 0

fix(DatePicker): avoid changing focus prematurely with previous segme…

8534240

…nt value of 0

zomakus changed the title ~~fix(TimeField): avoid changing focus prematurely with previous segment value of 0~~ fix(TimeField,DatePicker): avoid changing focus prematurely with previous segment value of 0 Apr 5, 2026

refactor(tests): move premature focus tests from DatePicker to DateField

8f1eb06

zomakus changed the title ~~fix(TimeField,DatePicker): avoid changing focus prematurely with previous segment value of 0~~ fix(TimeField,DateField): avoid changing focus prematurely with previous segment value of 0 Apr 5, 2026

zernonia merged commit c04bed3 into unovue:v2 Apr 6, 2026
6 checks passed

coderabbitai Bot mentioned this pull request Apr 6, 2026

fix(TimeField): change focus after pressing 0 more than once on hour segment with 12 hour locales #2581

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(TimeField,DateField): avoid changing focus prematurely with previous segment value of 0#2568

fix(TimeField,DateField): avoid changing focus prematurely with previous segment value of 0#2568
zernonia merged 4 commits into
unovue:v2from
zomakus:fix/2567-timefield-premature-next-segment

zomakus commented Apr 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 3, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

pkg-pr-new Bot commented Apr 4, 2026 •

edited

Loading

Uh oh!

zernonia commented Apr 4, 2026

Uh oh!

zomakus commented Apr 5, 2026 •

edited

Loading

Uh oh!

zernonia commented Apr 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

zomakus commented Apr 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zernonia commented Apr 4, 2026

Uh oh!

zomakus commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zernonia commented Apr 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zomakus commented Apr 3, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Apr 4, 2026 •

edited

Loading

zomakus commented Apr 5, 2026 •

edited

Loading