fix: dayperiod segment no longer resets when hour deleted (#7506)

* fix: dayperiod segment no longer reset

* undo prettier

* add test

---------

Co-authored-by: Yihui Liao <[email protected]>

Author: charlotte-whiting

packages/@react-spectrum/datepicker/test/TimeField.test.js

@@ -13,7 +13,7 @@
 import {act, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils-internal';
 import {Button} from '@react-spectrum/button';
 import {Form} from '@react-spectrum/form';
-import {parseZonedDateTime, Time} from '@internationalized/date';
+import {parseTime, parseZonedDateTime, Time} from '@internationalized/date';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -167,6 +167,23 @@ describe('TimeField', function () {
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
     });
 
+    it('should keep dayPeriod the same when hour segment that has a value >= 12 is cleared', async function () {
+      let {getAllByRole} = render(<TimeField label="Time" defaultValue={parseTime('20:24')} />);
+      let segments = getAllByRole('spinbutton');
+
+      await user.tab();
+      expect(segments[0]).toHaveFocus();
+      expect(segments[0]).toHaveAttribute('aria-valuetext', '8 PM');
+      expect(segments[2].getAttribute('aria-label')).toBe('AM/PM, ');
+      expect(within(segments[2]).getByText('PM')).toBeInTheDocument();
+
+      fireEvent.keyDown(document.activeElement, {key: 'Backspace'});
+      fireEvent.keyUp(document.activeElement, {key: 'Backspace'});
+      expect(segments[0]).toHaveAttribute('aria-valuetext', 'Empty');
+      expect(segments[2].getAttribute('aria-label')).toBe('AM/PM, ');
+      expect(within(segments[2]).getByText('PM')).toBeInTheDocument();
+    });
+
     it('should trigger right arrow key event for segment navigation', async function () {
       let {getAllByRole} = render(<TimeField label="Time" onKeyDown={onKeyDownSpy} onKeyUp={onKeyUpSpy} />);
       let segments = getAllByRole('spinbutton');

packages/@react-stately/datepicker/src/useDateFieldState.ts

@@ -399,6 +399,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
         } else if (!isPM && shouldBePM) {
           value = displayValue.set({hour: displayValue.hour + 12});
         }
+      } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) {
+        value = displayValue.set({hour: placeholder['hour'] + 12});
       } else if (part in displayValue) {
         value = displayValue.set({[part]: placeholder[part]});
       }