diff --git a/apps/edr-freight-web/backoffice/src/components/export/ExportDialog.tsx b/apps/edr-freight-web/backoffice/src/components/export/ExportDialog.tsx index 195d05f08..6c7af128c 100644 --- a/apps/edr-freight-web/backoffice/src/components/export/ExportDialog.tsx +++ b/apps/edr-freight-web/backoffice/src/components/export/ExportDialog.tsx @@ -105,14 +105,22 @@ export function ExportDialog({ opened, onClose, dataset, params }: ExportDialogP return out; }, [dataset.fields, dataset.groups, search]); - // Searching force-expands so matches aren't hidden inside collapsed groups. - // Otherwise open only groups that already have something selected, which is - // what keeps 77 fields tractable on open. - const openGroups = search.trim() - ? [...visibleByGroup.keys()] - : dataset.groups - .filter((g) => dataset.fields.some((f) => f.group === g.id && selectedSet.has(f.key))) - .map((g) => g.id); + // Which groups are expanded. Real state, NOT derived from the selection: + // deriving it made the accordion fully controlled with no way to change it, + // so clicking a group that had nothing selected re-collapsed on the next + // render and the group could only be opened by selecting a field in it. + // Seeded from `default` (not the live selection) so clearing every field + // doesn't slam the open groups shut underneath the user. + const [expanded, setExpanded] = useState(() => + dataset.groups + .filter((g) => dataset.fields.some((f) => f.group === g.id && f.default)) + .map((g) => g.id), + ); + + // Searching force-opens every group holding a match, so a hit can't hide + // inside a collapsed section. It only overrides what is displayed — the + // user's own expand state is untouched and returns when the search clears. + const openGroups = search.trim() ? [...visibleByGroup.keys()] : expanded; const toggleField = (key: string) => setSelected((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key])); @@ -264,7 +272,13 @@ export function ExportDialog({ opened, onClose, dataset, params }: ExportDialogP - + {dataset.groups.map((group) => { const fields = visibleByGroup.get(group.id); if (!fields) return null;