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; }) { 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 ( { + 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 (