fix(tables): wait for timezone before TTL edits

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.test.ts

@@ -11,9 +11,12 @@ import {
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors'
 import { cleanCellValue } from '@/app/workspace/[workspaceId]/tables/[tableId]/utils'
 
-const { mockUseTimezone } = vi.hoisted(() => ({ mockUseTimezone: vi.fn() }))
+const { mockToastError, mockUseTimezoneState } = vi.hoisted(() => ({
+  mockToastError: vi.fn(),
+  mockUseTimezoneState: vi.fn(),
+}))
 
-vi.mock('@/hooks/queries/general-settings', () => ({ useTimezone: mockUseTimezone }))
+vi.mock('@/hooks/queries/general-settings', () => ({ useTimezoneState: mockUseTimezoneState }))
 vi.mock('@sim/emcn', () => {
   const passthrough = ({ children }: { children?: ReactNode }) => children ?? null
   return {
@@ -26,15 +29,24 @@ vi.mock('@sim/emcn', () => {
     Popover: passthrough,
     PopoverAnchor: () => null,
     PopoverContent: passthrough,
-    toast: { error: vi.fn() },
+    toast: { error: mockToastError },
   }
 })
 const column = (type: ColumnDefinition['type']): ColumnDefinition => ({ name: 'expires_at', type })
 
+function changeInput(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+  setter?.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
 describe('dateEditorRawValue', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockUseTimezone.mockReturnValue('America/Los_Angeles')
+    mockUseTimezoneState.mockReturnValue({
+      timezone: 'America/Los_Angeles',
+      status: 'ready',
+    })
   })
 
   it('leaves TTL drafts for TTL coercion to resolve safely', () => {
@@ -73,7 +85,10 @@ describe('dateEditorRawValue', () => {
 
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     act(() => root.render(createElement(InlineEditor, props)))
-    mockUseTimezone.mockReturnValue('America/New_York')
+    mockUseTimezoneState.mockReturnValue({
+      timezone: 'America/New_York',
+      status: 'ready',
+    })
     act(() => root.render(createElement(InlineEditor, props)))
 
     const input = container.querySelector('input')
@@ -86,4 +101,130 @@ describe('dateEditorRawValue', () => {
     act(() => root.unmount())
     container.remove()
   })
+
+  it('waits for the saved timezone before creating a TTL draft', () => {
+    mockUseTimezoneState.mockReturnValue({
+      timezone: 'Asia/Tokyo',
+      status: 'loading',
+    })
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const onSave = vi.fn()
+    const props = {
+      value: Date.parse('2026-06-15T13:00:30Z') / 1000,
+      column: column('ttl'),
+      onSave,
+      onCancel: vi.fn(),
+    }
+
+    act(() => root.render(createElement(InlineEditor, props)))
+
+    expect(container.querySelector('input')).toMatchObject({
+      disabled: true,
+      placeholder: 'Loading timezone...',
+    })
+
+    mockUseTimezoneState.mockReturnValue({
+      timezone: 'America/Los_Angeles',
+      status: 'ready',
+    })
+    act(() => root.render(createElement(InlineEditor, props)))
+
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.disabled).toBe(false)
+    act(() => changeInput(input, '09/01/2026 9:00 AM'))
+    act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+
+    expect(onSave).toHaveBeenCalledWith(Date.parse('2026-09-01T16:00:00Z') / 1000, 'enter')
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('rejects an impossible TTL draft without clearing the cell', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const onSave = vi.fn()
+
+    act(() =>
+      root.render(
+        createElement(InlineEditor, {
+          value: Date.parse('2026-06-15T13:00:30Z') / 1000,
+          column: column('ttl'),
+          onSave,
+          onCancel: vi.fn(),
+        })
+      )
+    )
+
+    const input = container.querySelector('input') as HTMLInputElement
+    act(() => changeInput(input, '02/30/2026 1:30 AM'))
+    act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+
+    expect(onSave).not.toHaveBeenCalled()
+    expect(mockToastError).toHaveBeenCalledWith('Invalid expiration date')
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it.each([
+    { caseName: 'a historical sub-minute offset', timezone: 'Africa/Monrovia', value: 2670 },
+    {
+      caseName: 'the far-future representable boundary',
+      timezone: 'Asia/Tokyo',
+      value: 253_402_300_799,
+    },
+  ])('preserves the exact epoch for $caseName when untouched', ({ timezone, value }) => {
+    mockUseTimezoneState.mockReturnValue({ timezone, status: 'ready' })
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const onSave = vi.fn()
+
+    act(() =>
+      root.render(
+        createElement(InlineEditor, {
+          value,
+          column: column('ttl'),
+          onSave,
+          onCancel: vi.fn(),
+        })
+      )
+    )
+
+    const input = container.querySelector('input') as HTMLInputElement
+    act(() => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+
+    expect(onSave).toHaveBeenCalledWith(value, 'enter')
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('cancels TTL editing when the saved timezone cannot be loaded', () => {
+    mockUseTimezoneState.mockReturnValue({
+      timezone: 'America/Los_Angeles',
+      status: 'error',
+    })
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const onCancel = vi.fn()
+
+    act(() =>
+      root.render(
+        createElement(InlineEditor, {
+          value: 2670,
+          column: column('ttl'),
+          onSave: vi.fn(),
+          onCancel,
+        })
+      )
+    )
+
+    expect(onCancel).toHaveBeenCalledOnce()
+    expect(mockToastError).toHaveBeenCalledWith('Could not load timezone')
+    act(() => root.unmount())
+    container.remove()
+  })
 })

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -17,7 +17,7 @@ import { Check } from '@sim/emcn/icons'
 import type { ColumnDefinition } from '@/lib/table'
 import { columnTypeOf } from '@/lib/table/column-types'
 import { isCalendarDateString } from '@/lib/table/dates'
-import { useTimezone } from '@/hooks/queries/general-settings'
+import { useTimezoneState } from '@/hooks/queries/general-settings'
 import type { SaveReason } from '../../../types'
 import {
   cleanCellValue,
@@ -68,13 +68,46 @@ function handleEditorWheel(e: React.WheelEvent<HTMLInputElement>) {
  * edits update the draft in place — the day pick keeps the time-of-day
  * (including seconds), the time field keeps the day — and Enter/blur commits.
  */
-function InlineDateEditor({
+function InlineDateEditor(props: InlineEditorProps) {
+  const { column, onCancel } = props
+  const timezoneState = useTimezoneState()
+  const ttlTimezoneUnavailable = column.type === 'ttl' && timezoneState.status !== 'ready'
+
+  useEffect(() => {
+    if (column.type !== 'ttl' || timezoneState.status !== 'error') return
+    toast.error('Could not load timezone')
+    onCancel()
+  }, [column.type, onCancel, timezoneState.status])
+
+  if (ttlTimezoneUnavailable) {
+    return (
+      <input
+        type='text'
+        value=''
+        disabled
+        placeholder={
+          timezoneState.status === 'error' ? 'Timezone unavailable' : 'Loading timezone...'
+        }
+        className='w-full min-w-0 border-none bg-transparent p-0 text-[var(--text-muted)] text-small outline-none'
+      />
+    )
+  }
+
+  return <ReadyInlineDateEditor {...props} initialTimeZone={timezoneState.timezone} />
+}
+
+interface ReadyInlineDateEditorProps extends InlineEditorProps {
+  initialTimeZone: string
+}
+
+function ReadyInlineDateEditor({
   value,
   column,
   initialCharacter,
   onSave,
   onCancel,
-}: InlineEditorProps) {
+  initialTimeZone,
+}: ReadyInlineDateEditorProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const popoverRef = useRef<HTMLDivElement>(null)
   const doneRef = useRef(false)
@@ -83,9 +116,8 @@ function InlineDateEditor({
    *  and refocuses while a popover interaction is in flight (covers browsers
    *  where buttons don't take focus on click). */
   const popoverPointerAtRef = useRef(0)
-  const effectiveTimeZone = useTimezone()
   /** Keep one wall-clock interpretation for the lifetime of this edit. */
-  const editTimeZoneRef = useRef(effectiveTimeZone)
+  const editTimeZoneRef = useRef(initialTimeZone)
   const timeZone = editTimeZoneRef.current
 
   const storedValue = formatValueForInput(value, column.type, timeZone)
@@ -133,26 +165,45 @@ function InlineDateEditor({
       // silently shifting the instant of a value someone else wrote.
       if (storageVal === undefined && initialCharacter === undefined && current === initialDraft) {
         doneRef.current = true
-        onSave(storedValue ? cleanCellValue(storedValue, column, timeZone) : null, reason)
+        onSave(
+          column.type === 'ttl'
+            ? (value ?? null)
+            : storedValue
+              ? cleanCellValue(storedValue, column, timeZone)
+              : null,
+          reason
+        )
         return
       }
       const raw = dateEditorRawValue(current, column, timeZone, storageVal)
-      if (raw && Number.isNaN(Date.parse(raw))) {
+      const cleaned = raw ? cleanCellValue(raw, column, timeZone) : null
+      const parseError = columnTypeOf(column).parseErrorMessage
+      if (raw && cleaned === null && parseError) {
         if (reason === 'blur') {
-          if (!invalid) toast.error('Invalid date')
+          if (!invalid) toast.error(parseError)
           doneRef.current = true
           onCancel()
         } else {
-          toast.error('Invalid date')
+          toast.error(parseError)
           setInvalid(true)
           inputRef.current?.focus()
         }
         return
       }
       doneRef.current = true
-      onSave(raw ? cleanCellValue(raw, column, timeZone) : null, reason)
+      onSave(cleaned, reason)
     },
-    [invalid, onSave, onCancel, timeZone, initialDraft, initialCharacter, storedValue, column]
+    [
+      invalid,
+      onSave,
+      onCancel,
+      timeZone,
+      initialDraft,
+      initialCharacter,
+      storedValue,
+      column,
+      value,
+    ]
   )
 
   const handleKeyDown = useCallback(

apps/sim/hooks/queries/general-settings.test.ts

@@ -15,7 +15,7 @@ vi.mock('@tanstack/react-query', () => ({
 }))
 vi.mock('@/lib/core/utils/timezone', () => ({ getBrowserTimezone: mockGetBrowserTimezone }))
 
-import { useTimezone } from '@/hooks/queries/general-settings'
+import { useTimezone, useTimezoneState } from '@/hooks/queries/general-settings'
 
 describe('useTimezone', () => {
   beforeEach(() => {
@@ -27,6 +27,10 @@ describe('useTimezone', () => {
     mockUseQuery.mockReturnValue({ data: { timezone: null } })
 
     expect(useTimezone()).toBe('America/Los_Angeles')
+    expect(useTimezoneState()).toEqual({
+      timezone: 'America/Los_Angeles',
+      status: 'ready',
+    })
   })
 
   it('uses a saved timezone instead of the browser fallback', () => {
@@ -46,4 +50,22 @@ describe('useTimezone', () => {
     timezone = null
     expect(useTimezone()).toBe('America/Los_Angeles')
   })
+
+  it('distinguishes an unresolved preference from an explicit browser fallback', () => {
+    mockUseQuery.mockReturnValue({ data: undefined, isError: false })
+
+    expect(useTimezoneState()).toEqual({
+      timezone: 'America/Los_Angeles',
+      status: 'loading',
+    })
+  })
+
+  it('reports an unavailable preference instead of treating it as resolved', () => {
+    mockUseQuery.mockReturnValue({ data: undefined, isError: true })
+
+    expect(useTimezoneState()).toEqual({
+      timezone: 'America/Los_Angeles',
+      status: 'error',
+    })
+  })
 })

apps/sim/hooks/queries/general-settings.ts

@@ -149,8 +149,25 @@ export function useBillingUsageNotifications(): boolean {
  * captured so scheduling honors the account preference rather than the device.
  */
 export function useTimezone(): string {
-  const { data } = useGeneralSettings()
-  return data?.timezone ?? getBrowserTimezone()
+  return useTimezoneState().timezone
+}
+
+export interface TimezoneState {
+  timezone: string
+  status: 'loading' | 'ready' | 'error'
+}
+
+/**
+ * The effective timezone together with whether the saved preference is known.
+ * Destructive time-based editors use the status to avoid capturing the browser
+ * fallback while the preference request is still in flight.
+ */
+export function useTimezoneState(): TimezoneState {
+  const { data, isError } = useGeneralSettings()
+  return {
+    timezone: data?.timezone ?? getBrowserTimezone(),
+    status: data ? 'ready' : isError ? 'error' : 'loading',
+  }
 }
 
 /**