luckberg/familysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(18): timezone picker shows full list on tap (native select)

Browse Source 
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>
This commit is contained in:
Lucas Berger
2026-06-15 08:19:42 -04:00
co-authored by Claude Opus 4.8
parent 745e806d89
commit a8d6142566
2 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/pwa/e2e/timezone-verify.spec.ts
+9 -8
View File
@@ -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();