letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): inline-edit dropdowns auto-open + auto-exit on dismiss

Browse Source 
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>
This commit is contained in:
Matt Ciaccio
2026-05-03 16:14:51 +02:00
parent e9359fc431
commit 596476280d
6 changed files with 109 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/shared/addresses-editor.tsx
View File

@@ -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;
}}
/>
);
}

16
src/components/shared/country-combobox.tsx
View File

@@ -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}

24
src/components/shared/inline-country-field.tsx
View File

@@ -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>
);

16
src/components/shared/inline-timezone-field.tsx
View File

@@ -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>

15
src/components/shared/subdivision-combobox.tsx
View File

@@ -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}

15
src/components/shared/timezone-combobox.tsx
View File

@@ -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}