Problem re-ordering table rows in a Lightning Component

Question

I have a <table> component where the <tr> rows are also a component. Rows can be added and removed and that logic works fine. But I also want to be able to move rows up and down and when I try to do that this error (that appears to come from the underlying DOM) is produced:

rerender threw an error in 'markup://aura:expression' [Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.] Failing descriptor: {markup://aura:expression}

That error comes from this call (where body is the re-ordered array of components representing each <tr>):

component.set("v.body", body);

rendered in the component like this:

<tbody>
    {! v.body }
</tbody>

I don't see a way to discard the DOM nodes and have them re-created. Any ideas on how to fix?

PS

Working on debugging the problem and can now see this stack trace:

DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
    at Util.Aura.$Utils$.$Util$.insertBefore (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:3156:12)
    at Util.Aura.$Utils$.$Util$.insertBefore (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:3151:10)
    at AuraRenderingService.$insertElements$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:13881:20)
    at AuraRenderingService.$rerenderFacet$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:13755:10)
    at rerender (https://c.na40.visual.force.com/components/aura/expression.js:45:37)
    at componentConstructor.Component.$rerender$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:6457:18)
    at AuraRenderingService.$rerender$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:13505:47)
    at AuraRenderingService.$rerenderDirty$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:13828:14)
    at AuraClientService.$finishProcessing$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:11519:27)
    at AuraClientService.$finishCollection$ (https://c.na40.visual.force.com/auraFW/javascript/YfjoKfTjN2bVGUBUXXcoWw/aura_proddebug.js:11409:10)

Answer 1

Just spent a couple of hours in the JavaScript debugger and looking at the source code at AuraRenderingService.rerenderFacet to eventually realise that the problem originated in one of the components inside the tr component that contained an aura:if. Replacing that with the hack of:

class="{! v.bodyRow ? 'slds-show' : 'slds-hide' }"

fixed the problem.

So it looks like my problem is an example of this known (for 2 years) framework issue Lightning: Bug in Lightning framework when using aura:renderIf.

PS

With all the aura:if removed I am still hitting this error on row reordering.

PPS

Did some more testing including looking at the DOM immediately before the error and what I had in the DOM was:

<tbody>
    <tr>...</tr>
    <div>...</div>
    <tr>...</tr>
    <div>...</div>
</tbody>

This was caused by me adding a dialog component (normally hidden) to the end of the component that created each tr:

<aura:component>
    ...
    <tr>
        ...
    </tr>
    <c:myDialogComponent/>
</aura:component>

without considering that this would generate an invalid DOM that would then trip up the framework's rendering.

Having fixed that the error no longer occurs.

So the learning point is that if you get a DOM manipulation error in Lightning, check that the DOM you are creating is squeaky clean before assuming it is a framework problem.