Edit Conflict Detection

ProNew

Each save carries the version the person started from; if someone else saved first the server refuses, and the form offers to keep your version, take theirs or compare the two field by field, without losing what you typed. Use this when two people can edit the same record.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Records are shared and edited by more than one person, and a silent overwrite would lose work.

Do not use it when: For real-time collaboration, use an operational transform or CRDT editor. This is for save-based editing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ title, body, version }`	The loaded record.
`save`	`(draft, baseVersion) => Promise<SaveResult>`	Return `{ ok: true, doc }` or `{ ok: false, current }`.

Accessibility

The conflict is an alert that explains what happened in one sentence, then shows a real table (caption, column and row headers) of only the fields that differ, so screen readers can compare "Yours" and "Saved".
Nothing is overwritten silently: the person's text stays in the form and both resolutions are buttons that say what they do. Discarding is announced.
The server must enforce the version check; the client's job is to show the choice.

Testing

The pattern ships with a Testing Library test (edit-conflict-detection.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Records are shared and edited by more than one person, and a silent overwrite would lose work.

Do not use it when: For real-time collaboration, use an operational transform or CRDT editor. This is for save-based editing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`{ title, body, version }`	The loaded record.
`save`	`(draft, baseVersion) => Promise<SaveResult>`	Return `{ ok: true, doc }` or `{ ok: false, current }`.

Accessibility

The conflict is an alert that explains what happened in one sentence, then shows a real table (caption, column and row headers) of only the fields that differ, so screen readers can compare "Yours" and "Saved".
Nothing is overwritten silently: the person's text stays in the form and both resolutions are buttons that say what they do. Discarding is announced.
The server must enforce the version check; the client's job is to show the choice.

Testing

The pattern ships with a Testing Library test (edit-conflict-detection.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.