Drag-and-dropping and removing a row in a fb:dnd-repeat causes an exception

[obruchez]

Example in the Email Settings dialog (but this happens elsewhere as well):

email.mp4

To reproduce:

1. Add 2 rows
2. Try to move the 1st row after the 2nd row (this doesn't work)
3. Remove the second row

[ebruchez]

After failed DnD, some <div class="xforms-repeat-delimiter"></div> elements are removed, and that messes up subsequent DOM updates.

[ebruchez]

The layout of the HTML before is:

<div id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721⊙1" class="fb-form-fields xbl-component xbl-fr-dnd-repeat xbl-javascript-lifecycle">
    <div id="repeat-begin-dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2779⊙1" class="xforms-repeat-begin-end xforms-update-full"/>
    <div class="xforms-repeat-delimiter"/>
    <span class="xforms-update-full"> </span>
    <div class="fb-form-field xforms-dnd-item xforms-update-full xforms-dnd-moves" id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2782⊙1-1">
        ...
    </div>
    <span class="xforms-update-full"> </span>
    <div class="xforms-repeat-delimiter"/>
    <div class="fb-form-field xforms-dnd-item xforms-dnd-moves xforms-repeat-selected-item-2" id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2782⊙1-2">
        ...
    </div>
    <div id="repeat-end-dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2779⊙1" class="xforms-repeat-begin-end"/>
</div>

[ebruchez]

Layout of the HTML after:

<div id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721⊙1" class="fb-form-fields xbl-component xbl-fr-dnd-repeat xbl-javascript-lifecycle">
    <div id="repeat-begin-dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2779⊙1" class="xforms-repeat-begin-end xforms-update-full"/>
    <div class="xforms-repeat-delimiter"/>
    <span class="xforms-update-full"> </span>
    <span class="xforms-update-full"> </span>
    <div class="xforms-repeat-delimiter"/>
    <div class="fb-form-field xforms-dnd-item xforms-update-full xforms-dnd-moves" id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2782⊙1-1">
        ...
    </div>
    <div class="fb-form-field xforms-dnd-item xforms-dnd-moves xforms-repeat-selected-item-2" id="dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2782⊙1-2">
        ...
    </div>
    <div id="repeat-end-dialog-email-settings≡xf-2629≡fb-email-templates≡xf-2721≡xf-2779⊙1" class="xforms-repeat-begin-end"/>
</div>

[ebruchez]

Indeed, we say that we allow a drop before the last xforms-repeat-begin-end.

For reference, xforms-repeat-delimiter is placed before every repeated content.

In the case where we move the item from second position to first, things work, and the layout is correct.

In the failing case, I also note that we compute dndStart = 0 and dndEnd = 0, which means we are not telling the server about the drop, but also we are not restoring the DOM as we do when we tell the server. So this leaves the DOM in an incorrect state.

[ebruchez]

The markup pattern inside the container is:

• xforms-repeat-begin-end
• repeat n times
  • xforms-repeat-delimiter
  • repeated content including one with xforms-dnd-item
• xforms-repeat-begin-end

Current code checks we can drop before another xforms-dnd-item or before the next sibling of xforms-repeat-delimiter. The latter is incorrect.