TimeField with defaultValue persists time zone (#4715)

* improving the influence of defaultValue's timeZone on TimeField

* debugging console messages

* reverting all the console logging

* adding another timeZone check

* added tests that cover the bug and the secondary issue

Author: ktabors

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

@@ -11,10 +11,10 @@
  */
 
 import {act, fireEvent, render as render_, within} from '@react-spectrum/test-utils';
+import {parseZonedDateTime, Time} from '@internationalized/date';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
-import {Time} from '@internationalized/date';
 import {TimeField} from '../';
 import userEvent from '@testing-library/user-event';
 
@@ -176,5 +176,64 @@ describe('TimeField', function () {
       expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
       expect(onKeyUpSpy).toHaveBeenCalledTimes(2);
     });
+
+    describe('timeZone', function () {
+      it('should have a timeZone when set by defaultValue', function () {
+        let {getByRole} = render(<TimeField label="Time" defaultValue={parseZonedDateTime('2023-07-01T00:45-07:00[America/Los_Angeles]')} />);
+        let timezone = getByRole('textbox');
+
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+      });
+
+      it('should keep timeZone from defaultValue when minute segment cleared', function () {
+        let {getAllByRole, getByRole} = render(<TimeField label="Time" defaultValue={parseZonedDateTime('2023-07-01T01:05-07:00[America/Los_Angeles]')} />);
+        let timezone = getByRole('textbox');
+        let segments = getAllByRole('spinbutton');
+
+        userEvent.tab();
+        expect(segments[0]).toHaveFocus();
+
+        userEvent.tab();
+        expect(segments[1]).toHaveFocus();
+        expect(segments[1]).toHaveAttribute('aria-valuetext', '05');
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+
+        fireEvent.keyDown(document.activeElement, {key: 'Backspace'});
+        fireEvent.keyUp(document.activeElement, {key: 'Backspace'});
+        expect(segments[1]).toHaveAttribute('aria-valuetext', 'Empty');
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+      });
+
+      it('should keep timeZone from defaultValue when minute segment cleared then set', function () {
+        let {getAllByRole, getByRole} = render(<TimeField label="Time" defaultValue={parseZonedDateTime('2023-07-01T01:05-07:00[America/Los_Angeles]')} />);
+        let timezone = getByRole('textbox');
+        let segments = getAllByRole('spinbutton');
+
+        userEvent.tab();
+        expect(segments[0]).toHaveFocus();
+
+        userEvent.tab();
+        expect(segments[1]).toHaveFocus();
+        expect(segments[1]).toHaveAttribute('aria-valuetext', '05');
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+
+        fireEvent.keyDown(document.activeElement, {key: 'Backspace'});
+        fireEvent.keyUp(document.activeElement, {key: 'Backspace'});
+        expect(segments[1]).toHaveFocus();
+        expect(segments[1]).toHaveAttribute('aria-valuetext', 'Empty');
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+
+        fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
+        fireEvent.keyUp(document.activeElement, {key: 'ArrowUp'});
+        expect(segments[1]).toHaveAttribute('aria-valuetext', '00');
+        expect(timezone.getAttribute('aria-label')).toBe('time zone, ');
+        expect(within(timezone).getByText('PDT')).toBeInTheDocument();
+      });
+    });
   });
 });

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

@@ -12,7 +12,7 @@
 
 import {DateFieldState, useDateFieldState} from '.';
 import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
-import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
+import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo} from 'react';
 
@@ -42,13 +42,18 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
 
   let v = value || placeholderValue;
   let day = v && 'day' in v ? v : undefined;
-  let placeholderDate = useMemo(() => convertValue(placeholderValue), [placeholderValue]);
+  let defaultValueTimeZone = props.defaultValue && 'timeZone' in props.defaultValue ? props.defaultValue.timeZone : undefined;
+  let placeholderDate = useMemo(() => {
+    let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
+
+    return valueTimeZone || defaultValueTimeZone ? toZoned(convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : convertValue(placeholderValue);
+  }, [placeholderValue]);
   let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
   let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]);
 
   let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]);
   let onChange = newValue => {
-    setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
+    setValue(day || defaultValueTimeZone ? newValue : newValue && toTime(newValue));
   };
 
   return useDateFieldState({