Skip to content

onChange fires on focus and the design model mutates with no user edit — can't detect real content changes #17

Description

@ethantran

Environment: @beefree.io/sdk v11.x (v2:true) via @beefree.io/react-email-builder, trackChanges: true. Reproduced in this repo's own example/ app.

Goal: A discrete "Save Draft" + "unsaved changes" indicator + navigate-away guard (not autosave). Needs a reliable "did the user actually change content?" signal.

Repro (in example/): Set trackChanges: true on the builder config; capture the design (getTemplateJson) on onLoad as a baseline; in onChange, re-read the design and diff vs. baseline. Load the stock template, then click a block and arrow-key around — type nothing. onChange fires and the diff is non-empty. Actual console output:

[REPRO] onChange code=2223 (Text edited) | design changed vs loaded baseline: true
  page/rows/0/columns/0/modules/0/descriptor/image/width:  undefined -> "546px"
  page/rows/0/columns/0/modules/0/descriptor/image/height: undefined -> "142px"
  page/rows/2/columns/0/modules/0/descriptor/paragraph…:  …text re-wrapped on focus…

Across templates we've also seen focus inject text wrappers, recompute computedStyle, re-render merge-tag preview markup, and clear unreachable image srcs. onChange's code/description are identical for focus vs. real edits ("Text edited"); there's no version/dirty flag.

Expected: A reliable way to know content actually changed — onChange only on real changes, or a version/isDirty signal, or a documented stable serialization excluding editor-display artifacts.

BeefreeExample.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions