From a8d6142566f5dbfcc409e398012166582f85f396 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Mon, 15 Jun 2026 08:19:42 -0400
Subject: [PATCH] fix(18): timezone picker shows full list on tap (native
 select)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The IANA picker was an <input list=datalist>, which filters the dropdown by
whatever text is already in the field — so with the stored zone pre-filled a
user only saw a single option and had to erase the value (undiscoverable) to
browse. datalist is also unreliable in iOS Safari.

Replace it with a native <select> grouped by region (<optgroup>): tapping
shows the whole list with no typing/erasing, and it renders as the native
wheel picker on iOS. The "Use detected" one-tap shortcut still covers the
common case. Option labels are shortened (region stripped, underscores → spaces)
while values remain full IANA ids. e2e updated from fill() to selectOption().

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/pwa/e2e/timezone-verify.spec.ts | 17 +++++-----
 apps/pwa/src/routes/AdminPage.tsx    | 46 +++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/apps/pwa/e2e/timezone-verify.spec.ts b/apps/pwa/e2e/timezone-verify.spec.ts
index cbbfbe5..ff38615 100644
--- a/apps/pwa/e2e/timezone-verify.spec.ts
+++ b/apps/pwa/e2e/timezone-verify.spec.ts
@@ -4,8 +4,9 @@
  * Verifies the admin Timezone section with the real 18-02 API endpoints.
  * Runs on desktop profile only (admin UI is desktop-focused).
  *
- * NOTE: the IANA picker input is type="text" with list="iana-zones" which gives
- * it the ARIA combobox role (not textbox) in Chromium.
+ * NOTE: the IANA picker is a native <select> grouped by region, which has the
+ * ARIA combobox role. Selecting a zone uses selectOption (not fill), and the
+ * option's value is the full IANA id even though its visible label is shortened.
  */
 import { test, expect } from '@playwright/test';
 
@@ -22,12 +23,12 @@ test.describe('Admin Timezone section — 18-04 round-trip', () => {
     await expect(page.getByRole('region', { name: 'Timezone' })).toBeVisible();
   });
 
-  test('Timezone input (combobox) is visible and pre-filled', async ({ page }) => {
-    // ARIA role for <input type="text" list="iana-zones"> is combobox
+  test('Timezone picker (combobox) is visible and pre-filled', async ({ page }) => {
+    // Native <select> has the combobox role
     const input = page.getByRole('combobox', { name: 'Household timezone' });
     await expect(input).toBeVisible();
     const val = await input.inputValue();
-    expect(val.length, 'Input should have a non-empty timezone').toBeGreaterThan(0);
+    expect(val.length, 'Picker should have a non-empty timezone').toBeGreaterThan(0);
   });
 
   test('Save is enabled on first run when timezone is not yet explicit (WR-01)', async ({ page }) => {
@@ -45,10 +46,10 @@ test.describe('Admin Timezone section — 18-04 round-trip', () => {
     await expect(saveBtn).toBeEnabled();
   });
 
-  test('Changing the input enables Save', async ({ page }) => {
+  test('Changing the selection enables Save', async ({ page }) => {
     const tzSection = page.getByRole('region', { name: 'Timezone' });
     const input = page.getByRole('combobox', { name: 'Household timezone' });
-    await input.fill('America/Chicago');
+    await input.selectOption('America/Chicago');
     const saveBtn = tzSection.getByRole('button', { name: /Save/ });
     await expect(saveBtn).toBeEnabled();
   });
@@ -58,7 +59,7 @@ test.describe('Admin Timezone section — 18-04 round-trip', () => {
     const tzSection = page.getByRole('region', { name: 'Timezone' });
 
     // Set to a known value
-    await input.fill('America/Chicago');
+    await input.selectOption('America/Chicago');
     const saveBtn = tzSection.getByRole('button', { name: /^Save$/ });
     await expect(saveBtn).toBeEnabled();
     await saveBtn.click();
diff --git a/apps/pwa/src/routes/AdminPage.tsx b/apps/pwa/src/routes/AdminPage.tsx
index efc2630..fa186ad 100644
--- a/apps/pwa/src/routes/AdminPage.tsx
+++ b/apps/pwa/src/routes/AdminPage.tsx
@@ -127,12 +127,28 @@ export function AdminPage() {
     effectiveTimezoneInput === '' ||
     (isExplicit && effectiveTimezoneInput === storedTimezone);
 
-  // IANA zones list for the datalist (Intl.supportedValuesOf may not be present in all runtimes)
+  // IANA zones list (Intl.supportedValuesOf may not be present in all runtimes)
   const ianaZones: string[] =
     typeof (Intl as { supportedValuesOf?: (key: string) => string[] }).supportedValuesOf === 'function'
       ? (Intl as { supportedValuesOf: (key: string) => string[] }).supportedValuesOf('timeZone')
       : [];
 
+  // Group zones by region (the part before the first '/') for an <optgroup>-based
+  // native <select>. A native select shows the full list on tap with no typing —
+  // and renders as the native wheel picker on iOS — unlike a datalist, which hides
+  // the list behind whatever text is already in the field.
+  const zonesByRegion = ianaZones.reduce<Record<string, string[]>>((acc, tz) => {
+    const region = tz.includes('/') ? tz.slice(0, tz.indexOf('/')) : 'Other';
+    (acc[region] ??= []).push(tz);
+    return acc;
+  }, {});
+  const regionOrder = Object.keys(zonesByRegion).sort((a, b) =>
+    a === 'Other' ? 1 : b === 'Other' ? -1 : a.localeCompare(b),
+  );
+  // Defensive: a stored/validated zone could (rarely) be absent from supportedValuesOf.
+  const currentZoneMissing =
+    !!effectiveTimezoneInput && !ianaZones.includes(effectiveTimezoneInput);
+
   // Save shared calendar mutation
   const sharedCalMutation = useMutation({
     mutationFn: (calId: number) => setSharedCalendar(calId),
@@ -382,14 +398,13 @@ export function AdminPage() {
                 </div>
               )}
 
-              {/* Searchable IANA picker */}
+              {/* IANA picker — native <select> grouped by region. Shows the full
+                  list on tap (no typing/erasing) and uses the native wheel picker
+                  on iOS. */}
               <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
-                <input
-                  type="text"
-                  list="iana-zones"
+                <select
                   value={effectiveTimezoneInput}
                   onChange={(e) => setTimezoneInput(e.target.value)}
-                  placeholder="e.g. America/Chicago"
                   aria-label="Household timezone"
                   style={{
                     width: '100%',
@@ -402,13 +417,22 @@ export function AdminPage() {
                     color: 'var(--color-text-primary)',
                     background: 'var(--color-surface, #ffffff)',
                     minHeight: '44px',
+                    cursor: 'pointer',
                   }}
-                />
-                <datalist id="iana-zones">
-                  {ianaZones.map((tz) => (
-                    <option key={tz} value={tz} />
+                >
+                  {currentZoneMissing && (
+                    <option value={effectiveTimezoneInput}>{effectiveTimezoneInput}</option>
+                  )}
+                  {regionOrder.map((region) => (
+                    <optgroup key={region} label={region}>
+                      {zonesByRegion[region].map((tz) => (
+                        <option key={tz} value={tz}>
+                          {tz.includes('/') ? tz.slice(tz.indexOf('/') + 1).replace(/_/g, ' ') : tz}
+                        </option>
+                      ))}
+                    </optgroup>
                   ))}
-                </datalist>
+                </select>
               </div>
 
               {/* Use detected zone affordance (D-02) */}