fix(ui): falling back to UTC timezones in timezone picker (#15841)

We were accidentally falling back to UTC values in the timezone picker
when in reality we shouldn't fallback to any timezone unless its
specified.

Now no timezone will be defaulted to unless its explicitly set as
`defaultTimezone`

Author: paulpopus

packages/ui/src/elements/TimezonePicker/index.tsx

@@ -30,7 +30,7 @@ export const TimezonePicker: React.FC<Props> = (props) => {
   const selectedTimezone = useMemo(() => {
     return options.find((t) => {
       const value = typeof t === 'string' ? t : t.value
-      return value === (selectedTimezoneFromProps || 'UTC')
+      return value === selectedTimezoneFromProps
     })
   }, [options, selectedTimezoneFromProps])
 

test/fields/collections/Date/e2e.spec.ts

@@ -15,8 +15,8 @@ import {
   saveDocAndAssert,
 } from '../../../__helpers/e2e/helpers.js'
 import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
-import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../__helpers/shared/clearAndSeed/reInitializeDB.js'
+import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { RESTClient } from '../../../__helpers/shared/rest.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { dateFieldsSlug } from '../../slugs.js'
@@ -603,6 +603,28 @@ describe('Date', () => {
       // eslint-disable-next-line payload/no-flaky-assertions
       expect(existingDoc?.dayAndTimeWithTimezone).toEqual(expectedUTCValue)
     })
+
+    test('should not show UTC in timezone picker when no defaultTimezone is configured', async () => {
+      await page.goto(url.create)
+
+      const valueContainer = page.locator('#field-dateWithTimezoneNoDefault .rs__value-container')
+
+      await expect(valueContainer).toBeVisible()
+
+      const singleValue = page.locator('#field-dateWithTimezoneNoDefault .rs__single-value')
+
+      await expect(singleValue).toBeHidden()
+    })
+
+    test('should show configured defaultTimezone in timezone picker on create', async () => {
+      await page.goto(url.create)
+
+      const selectedTimezone = page.locator(
+        '#field-dayAndTimeWithTimezoneRequired .rs__value-container',
+      )
+
+      await expect(selectedTimezone).toContainText('Eastern Time')
+    })
   })
 
   describe('dates with offset timezones', () => {

test/fields/collections/Date/index.ts

@@ -230,6 +230,22 @@ const DateFields: CollectionConfig = {
         ],
       },
     },
+    {
+      name: 'dateWithTimezoneNoDefault',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'dayAndTime',
+        },
+      },
+      timezone: {
+        supportedTimezones: [
+          { label: 'New York', value: 'America/New_York' },
+          { label: 'London', value: 'Europe/London' },
+          { label: 'UTC', value: 'UTC' },
+        ],
+      },
+    },
     {
       name: 'dateWithTimezoneWithDisabledColumns',
       type: 'date',

test/fields/collections/Date/shared.ts

@@ -37,6 +37,9 @@ export const dateDoc: Partial<DateField> = {
   // Mixed IANA + offset timezones - 2027-08-12 10:00 AM in America/New_York (UTC-4 in summer) = 14:00 UTC
   dateWithMixedTimezones: '2027-08-12T14:00:00.000+00:00',
   dateWithMixedTimezones_tz: 'America/New_York',
+  // Date with timezone but no defaultTimezone configured
+  dateWithTimezoneNoDefault: '2027-08-12T14:00:00.000+00:00',
+  dateWithTimezoneNoDefault_tz: 'America/New_York',
   // Date with timezone where timezone column is hidden via override
   dateWithTimezoneWithDisabledColumns: '2027-08-12T14:00:00.000+00:00',
   dateWithTimezoneWithDisabledColumns_tz: 'America/New_York',

test/fields/int.spec.ts

@@ -4812,5 +4812,35 @@ describe('Fields', () => {
       )
       expect(disabledColumnsTzField?.label).toEqual('Date With Timezone With Disabled Columns Tz')
     })
+
+    it('should not silently default timezone to UTC when no defaultTimezone is configured', async () => {
+      const { dateWithTimezoneNoDefault_tz: _, ...dataWithoutNoDefaultTz } = dateDoc
+
+      const doc = await payload.create({
+        collection: dateFieldsSlug,
+        data: {
+          ...dataWithoutNoDefaultTz,
+          dateWithTimezoneNoDefault: '2027-08-12T14:00:00.000Z',
+        },
+        draft: true,
+      })
+
+      expect(doc.dateWithTimezoneNoDefault_tz).toBeFalsy()
+    })
+
+    it('should use configured defaultTimezone when set', async () => {
+      const { dateWithMixedTimezones_tz: _, ...dataWithoutMixedTz } = dateDoc
+
+      const doc = await payload.create({
+        collection: dateFieldsSlug,
+        data: {
+          ...dataWithoutMixedTz,
+          dateWithMixedTimezones: '2027-08-12T14:00:00.000Z',
+        },
+        draft: true,
+      })
+
+      expect(doc.dateWithMixedTimezones_tz).toEqual('America/New_York')
+    })
   })
 })

test/fields/payload-types.ts

@@ -1267,6 +1267,8 @@ export interface DateField {
   dateWithOffsetTimezone_tz?: ('+05:30' | '-08:00' | '+00:00') | null;
   dateWithMixedTimezones?: string | null;
   dateWithMixedTimezones_tz?: ('America/New_York' | '+05:30' | 'UTC') | null;
+  dateWithTimezoneNoDefault?: string | null;
+  dateWithTimezoneNoDefault_tz?: ('America/New_York' | 'Europe/London' | 'UTC') | null;
   dateWithTimezoneWithDisabledColumns?: string | null;
   dateWithTimezoneWithDisabledColumns_tz?: SupportedTimezones;
   updatedAt: string;
@@ -3194,6 +3196,8 @@ export interface DateFieldsSelect<T extends boolean = true> {
   dateWithOffsetTimezone_tz?: T;
   dateWithMixedTimezones?: T;
   dateWithMixedTimezones_tz?: T;
+  dateWithTimezoneNoDefault?: T;
+  dateWithTimezoneNoDefault_tz?: T;
   dateWithTimezoneWithDisabledColumns?: T;
   dateWithTimezoneWithDisabledColumns_tz?: T;
   updatedAt?: T;