Time Zone Picker Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Change time zone button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ZoneFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From Intl.DateTimeFormat with each zone's timeZone, read once at one typed moment, Friday 9 October 2026 at 14:30 UTC, so the list never changes with your clock and a poster never ages. The offset is the difference between the zone's own date parts and that moment, so it already includes daylight saving for that day (London reads UTC+01:00 then and Berlin UTC+02:00). Both are in the file as MOMENT; in your app use the date the meeting or the page is about, and store the IANA name, not the offset.

Only when you press it, never on load. It reads Intl.DateTimeFormat().resolvedOptions().timeZone, which is real: whatever zone your browser reports. If that zone is in the list it is picked and scrolled into view; if it isn't it is added in a This device group at the top with its own offset and time. If the browser gives no usable name it says so in the status line instead.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the search field, and Escape, Cancel and the close button return focus to the Change time zone button. Arrow Down in the field moves into the list, where the arrow keys move through the rows and Enter picks; Enter in the field with something typed picks the top match. The count under the field says how many zones match, and the status line says which zone was chosen. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

Nothing is saved: Save time zone changes the Time zone row of the drawn page and says so in the polite status line, and closing without saving lets the choice go. The 14 zones are typed in the file. In your app load the person's zone from their profile, keep the full IANA list (or the browser's Intl.supportedValuesOf("timeZone")), save the IANA name on the server, and show every time with that zone.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them, search first. Each row keeps its city and name on the start side and its time and offset on the end side, so a long list reads as one narrow column. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.