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

zomakus · web-flow · commit 1d77296bd291 · 2026-04-13T22:07:31.000+08:00
* fix(TimeFile): change focus after pressing 0 more than once on hour segment

* test(TimeField): improve robustness of test case to verify that spamming 0 properly advances segment

* fix(TestField): replace previous fix with a more localized approach
diff --git a/packages/core/src/TimeField/TimeField.test.ts b/packages/core/src/TimeField/TimeField.test.ts
@@ -446,6 +446,31 @@ describe('timeField', async () => {
     expect(dayPeriod).toHaveFocus()
   })
 
+  it('takes you all the way through the segment with spamming 0', async () => {
+    const { getByTestId, user, hour } = setup({
+      timeFieldProps: {
+        modelValue: zonedDateTime,
+        granularity: 'second',
+      },
+    })
+
+    const { minute, second, dayPeriod } = getTimeSegments(getByTestId)
+
+    await user.click(hour)
+    await user.keyboard('{0}')
+    expect(hour).toHaveFocus()
+    await user.keyboard('{0}')
+    expect(minute).toHaveFocus()
+    await user.keyboard('{0}')
+    expect(minute).toHaveFocus()
+    await user.keyboard('{0}')
+    expect(second).toHaveFocus()
+    await user.keyboard('{0}')
+    expect(second).toHaveFocus()
+    await user.keyboard('{0}')
+    expect(dayPeriod).toHaveFocus()
+  })
+
   it('updates the hour on the modelValue if the dayPeriod is updated', async () => {
     const { getByTestId, user, value, rerender } = setup({
       timeFieldProps: {
diff --git a/packages/core/src/shared/date/useDateField.ts b/packages/core/src/shared/date/useDateField.ts
@@ -755,7 +755,9 @@ export function useDateField(props: UseDateFieldProps) {
 
       let displayPrev = prevValue
       if (is12Hour && prevValue !== null) {
-        displayPrev = prevValue === 0 ? 12 : (prevValue > 12 ? prevValue - 12 : prevValue)
+        // 12 AM/PM should be treated as 0 internally even if it doesn't match the display
+        // otherwise repeatedly typing 0 will not advance to the next segment
+        displayPrev = prevValue % 12 === 0 ? 0 : (prevValue > 12 ? prevValue - 12 : prevValue)
       }
 
       const { value, moveToNext } = updateHour(max, num, displayPrev)

Original file line number	Diff line number	Diff line change
`@@ -755,7 +755,9 @@ export function useDateField(props: UseDateFieldProps) {`
`755`	`755`
`756`	`756`	`let displayPrev = prevValue`
`757`	`757`	`if (is12Hour && prevValue !== null) {`
`758`		`- displayPrev = prevValue === 0 ? 12 : (prevValue > 12 ? prevValue - 12 : prevValue)`
	`758`	`+ // 12 AM/PM should be treated as 0 internally even if it doesn't match the display`
	`759`	`+ // otherwise repeatedly typing 0 will not advance to the next segment`
	`760`	`+ displayPrev = prevValue % 12 === 0 ? 0 : (prevValue > 12 ? prevValue - 12 : prevValue)`
`759`	`761`	`}`
`760`	`762`
`761`	`763`	`const { value, moveToNext } = updateHour(max, num, displayPrev)`