Sync Conflict Error Block for React

Nothing is synced. With fields still to choose it says which ones ("Choose for Duration and Channel.") and moves focus to the first one's Yours cell, so the first press is never a dead end. With every field chosen it waits a moment and says in a polite status line that it merged in this demo. In your app, send the merged values from the submit handler and show your server's answer in the same line.

Each field is typed once with what you wrote and what the other editor wrote, and the page compares the two texts: the fields whose texts differ become the ruled rows, the rest go in the collapsible. Edit a field's text and it moves between the two lists by itself, and the counts, the merged result and the "Plus 4 fields" line follow.

They are two ends of the same state. Pressing one chooses that side for every row; choosing the radios by hand to the same side lights the same button, and any mix leaves both off. Pressing the lit button again clears every choice. The merged result and the count move with it.

A conflict on one document is rarely all or nothing. Per field the choice is one of two texts, so each row is a native radio group with a name and a label, keyboard and screen reader ready, and you can see the two texts next to each other with their save times. The merged result then shows what you would end up with before anything is applied.

Opening it adds rows below everything else, so the merged result and the Apply merge button never move when you look at the unchanged fields. They are read-only: both versions agree, so there is nothing to choose.

Yours and Theirs stack inside each row, the merged result keeps one line per field, and the status line and Apply merge are pinned to the foot of the screen until you reach them.