Skip to content

Bug: TermFormDialog doesn't update form state when editing different terms #220

@tohaitrieu

Description

@tohaitrieu

Description

When editing taxonomy terms in the admin UI, the form fields don't update when switching between different terms. The form continues to show data from the previously edited term.

Steps to Reproduce

  1. Go to Taxonomies > Categories
  2. Click Edit on "Category A"
  3. Close the dialog without saving
  4. Click Edit on "Category B"
  5. Expected: Form shows Category B's data (label, slug, description)
  6. Actual: Form still shows Category A's data

Root Cause

In packages/admin/src/components/TaxonomyManager.tsx, the TermFormDialog component uses useState with initial values from the term prop:

const [label, setLabel] = React.useState(term?.label || "");
const [slug, setSlug] = React.useState(term?.slug || "");
const [description, setDescription] = React.useState(term?.description || "");

React's useState only uses the initial value on first mount. When the term prop changes, the state is not updated.

Proposed Fix

Add a useEffect to sync form state when the term prop changes:

// Sync form state when term prop changes (for edit mode)
React.useEffect(() => {
  setLabel(term?.label || "");
  setSlug(term?.slug || "");
  setParentId(term?.parentId || "");
  setDescription(term?.description || "");
  setAutoSlug(!term);
  setError(null);
}, [term]);

I have a fix ready and can submit a PR if this approach is acceptable.

Environment

  • EmDash version: latest (main branch)
  • Browser: Chrome/Safari
  • OS: macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions