From 596476280dee11a2a8dfcdeea36fada4b4941171 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Sun, 3 May 2026 16:14:51 +0200
Subject: [PATCH] feat(ui): inline-edit dropdowns auto-open + auto-exit on
 dismiss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a user clicks an inline-edit affordance for country / timezone /
subdivision, the field flipped to its combobox trigger but the popover
didn't open — they had to click again. And if they dismissed the popover
without picking, the field stayed in edit mode showing a "Select country…"
trigger they couldn't get out of.

Combobox primitives (country / timezone / subdivision) now accept:
  - defaultOpen — open on first render
  - onOpenChange — fired on every open/close transition

InlineCountryField / InlineTimezoneField / and the country + subdivision
fields inside addresses-editor pass defaultOpen=true and use onOpenChange
to auto-exit edit mode when the popover closes without a selection. A
pickedRef gate prevents the close-handler from racing the commit() exit
when the user does pick a value.

Bonus: addresses-editor now renders a flag emoji next to the country name
in the read-only state (regional-indicator pair from the ISO code).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/shared/addresses-editor.tsx    | 34 +++++++++++++++++--
 src/components/shared/country-combobox.tsx    | 16 +++++++--
 .../shared/inline-country-field.tsx           | 24 +++++++++++--
 .../shared/inline-timezone-field.tsx          | 16 ++++++++-
 .../shared/subdivision-combobox.tsx           | 15 ++++++--
 src/components/shared/timezone-combobox.tsx   | 15 ++++++--
 6 files changed, 109 insertions(+), 11 deletions(-)

diff --git a/src/components/shared/addresses-editor.tsx b/src/components/shared/addresses-editor.tsx
index e3c9302..48298e4 100644
--- a/src/components/shared/addresses-editor.tsx
+++ b/src/components/shared/addresses-editor.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Loader2, MapPin, Plus, Star, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -225,6 +225,14 @@ function Field({ label, children }: { label: string; children: React.ReactNode }
   );
 }
 
+/** Regional-indicator emoji flag for an ISO alpha-2 code (e.g. 'FR' → 🇫🇷). */
+function flagEmoji(code: string | null | undefined): string {
+  if (!code || code.length !== 2) return '';
+  const A = 0x1f1e6;
+  const a = 'A'.charCodeAt(0);
+  return String.fromCodePoint(A + code.charCodeAt(0) - a, A + code.charCodeAt(1) - a);
+}
+
 function CountryFieldInline({
   value,
   onSave,
@@ -233,20 +241,34 @@ function CountryFieldInline({
   onSave: (iso: string | null) => Promise<void>;
 }) {
   const [editing, setEditing] = useState(false);
+  // Tracks whether a value was picked this edit cycle so the open-change
+  // handler doesn't double-exit while commit is still in flight.
+  const pickedRef = useRef(false);
+
   if (editing) {
     return (
       <CountryCombobox
         value={value ?? null}
         onChange={async (iso) => {
+          pickedRef.current = true;
           setEditing(false);
           await onSave(iso ?? null);
         }}
         clearable
         className="w-full"
+        // Drop the user straight into the picker — no extra click on the
+        // trigger required.
+        defaultOpen
+        onOpenChange={(open) => {
+          // Auto-exit edit mode when the popover closes without a pick so
+          // the user isn't stuck staring at a "Select country…" trigger.
+          if (!open && !pickedRef.current) setEditing(false);
+          if (open) pickedRef.current = false;
+        }}
       />
     );
   }
-  const display = value ? getCountryName(value, 'en') : null;
+  const display = value ? `${flagEmoji(value)} ${getCountryName(value, 'en')}` : null;
   return (
     <button
       type="button"
@@ -268,17 +290,25 @@ function SubdivisionFieldInline({
   onSave: (code: string | null) => Promise<void>;
 }) {
   const [editing, setEditing] = useState(false);
+  const pickedRef = useRef(false);
+
   if (editing) {
     return (
       <SubdivisionCombobox
         value={value ?? null}
         country={country}
         onChange={async (code) => {
+          pickedRef.current = true;
           setEditing(false);
           await onSave(code ?? null);
         }}
         clearable
         className="w-full"
+        defaultOpen
+        onOpenChange={(open) => {
+          if (!open && !pickedRef.current) setEditing(false);
+          if (open) pickedRef.current = false;
+        }}
       />
     );
   }
diff --git a/src/components/shared/country-combobox.tsx b/src/components/shared/country-combobox.tsx
index 4cc2925..67a8d29 100644
--- a/src/components/shared/country-combobox.tsx
+++ b/src/components/shared/country-combobox.tsx
@@ -30,6 +30,12 @@ interface CountryComboboxProps {
   clearable?: boolean;
   id?: string;
   'data-testid'?: string;
+  /** Open the dropdown on first render. Used by inline-edit wrappers so the
+   *  user lands directly in the picker after clicking the edit affordance. */
+  defaultOpen?: boolean;
+  /** Notified whenever the dropdown opens/closes. Inline-edit wrappers use
+   *  this to auto-exit edit mode when the user dismisses without picking. */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -58,8 +64,14 @@ export function CountryCombobox({
   clearable = true,
   id,
   'data-testid': testId,
+  defaultOpen = false,
+  onOpenChange,
 }: CountryComboboxProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
   const effectiveLocale = locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en');
 
   // Pre-build the options list once per locale change so the cmdk filter
@@ -75,7 +87,7 @@ export function CountryCombobox({
   const selected = value ? options.find((o) => o.code === value) : undefined;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           id={id}
diff --git a/src/components/shared/inline-country-field.tsx b/src/components/shared/inline-country-field.tsx
index a4656dd..1fc6c71 100644
--- a/src/components/shared/inline-country-field.tsx
+++ b/src/components/shared/inline-country-field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Loader2, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -31,8 +31,12 @@ export function InlineCountryField({
 }: InlineCountryFieldProps) {
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
+  // Set true when the user picks a value from the dropdown, so the
+  // popover-close handler knows commit() will exit edit mode itself.
+  const pickedRef = useRef(false);
 
   async function commit(next: CountryCode | null) {
+    pickedRef.current = true;
     if (next === (value ?? null)) {
       setEditing(false);
       return;
@@ -51,7 +55,23 @@ export function InlineCountryField({
   if (editing) {
     return (
       <div className={cn('flex items-center gap-1', className)}>
-        <CountryCombobox value={value} onChange={(iso) => void commit(iso)} data-testid={testId} />
+        <CountryCombobox
+          value={value}
+          onChange={(iso) => void commit(iso)}
+          data-testid={testId}
+          defaultOpen
+          onOpenChange={(open) => {
+            // When the dropdown closes without a selection, leave edit mode
+            // so the user isn't stuck staring at the trigger button. If a
+            // pick happened, commit() handles the exit (and may need to keep
+            // edit mode briefly to show the saving spinner).
+            if (!open && !pickedRef.current) {
+              setEditing(false);
+            }
+            // Reset for the next open cycle.
+            if (open) pickedRef.current = false;
+          }}
+        />
         {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
       </div>
     );
diff --git a/src/components/shared/inline-timezone-field.tsx b/src/components/shared/inline-timezone-field.tsx
index 4d1589d..d212d01 100644
--- a/src/components/shared/inline-timezone-field.tsx
+++ b/src/components/shared/inline-timezone-field.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Loader2, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -31,8 +31,12 @@ export function InlineTimezoneField({
 }: InlineTimezoneFieldProps) {
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
+  // Set true when the user picks a value from the dropdown, so the
+  // popover-close handler knows commit() will exit edit mode itself.
+  const pickedRef = useRef(false);
 
   async function commit(next: string | null) {
+    pickedRef.current = true;
     if (next === (value ?? null)) {
       setEditing(false);
       return;
@@ -56,6 +60,16 @@ export function InlineTimezoneField({
           onChange={(tz) => void commit(tz)}
           countryHint={countryHint ?? undefined}
           data-testid={testId}
+          defaultOpen
+          onOpenChange={(open) => {
+            // Auto-exit edit mode when the dropdown closes without a pick,
+            // so the user isn't stuck looking at the trigger. commit() owns
+            // the exit when a value was selected.
+            if (!open && !pickedRef.current) {
+              setEditing(false);
+            }
+            if (open) pickedRef.current = false;
+          }}
         />
         {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
       </div>
diff --git a/src/components/shared/subdivision-combobox.tsx b/src/components/shared/subdivision-combobox.tsx
index fe1544b..81a215d 100644
--- a/src/components/shared/subdivision-combobox.tsx
+++ b/src/components/shared/subdivision-combobox.tsx
@@ -32,6 +32,11 @@ interface SubdivisionComboboxProps {
   clearable?: boolean;
   id?: string;
   'data-testid'?: string;
+  /** Open the dropdown on first render. Used by inline-edit wrappers. */
+  defaultOpen?: boolean;
+  /** Notified whenever the dropdown opens/closes. Inline-edit wrappers use
+   *  this to auto-exit edit mode when the user dismisses without picking. */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export function SubdivisionCombobox({
@@ -44,8 +49,14 @@ export function SubdivisionCombobox({
   clearable = true,
   id,
   'data-testid': testId,
+  defaultOpen = false,
+  onOpenChange,
 }: SubdivisionComboboxProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
 
   const options = useMemo(() => {
     if (!country) return [];
@@ -64,7 +75,7 @@ export function SubdivisionCombobox({
   else triggerLabel = placeholder;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           id={id}
diff --git a/src/components/shared/timezone-combobox.tsx b/src/components/shared/timezone-combobox.tsx
index fc495a7..278fdc2 100644
--- a/src/components/shared/timezone-combobox.tsx
+++ b/src/components/shared/timezone-combobox.tsx
@@ -29,6 +29,11 @@ interface TimezoneComboboxProps {
   clearable?: boolean;
   id?: string;
   'data-testid'?: string;
+  /** Open the dropdown on first render. Used by inline-edit wrappers. */
+  defaultOpen?: boolean;
+  /** Notified whenever the dropdown opens/closes. Inline-edit wrappers use
+   *  this to auto-exit edit mode when the user dismisses without picking. */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export function TimezoneCombobox({
@@ -41,8 +46,14 @@ export function TimezoneCombobox({
   clearable = true,
   id,
   'data-testid': testId,
+  defaultOpen = false,
+  onOpenChange,
 }: TimezoneComboboxProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
 
   const allOptions = useMemo(() => {
     return listAllTimezones().map((tz) => ({
@@ -66,7 +77,7 @@ export function TimezoneCombobox({
   const selectedLabel = value ? formatTimezoneLabel(value) : placeholder;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           id={id}