6

I have a Lightning Component that allows additional rows to be added in between existing rows. The rows are represented by a facet:

<aura:attribute name="payments" type="Aura.Component[]"/>

and the helper code that adds a row is:

var index = ...;
$A.createComponent("c:payment", {...}, function(newComponent, status, error) {
    if (status === "SUCCESS") {
        var rows = component.get("v.payments");
        rows.splice(index, 0, newComponent);
        component.set("v.payments", rows);
    } else {
         ...
    }
}

I've added JavaScript debugging output to confirm that the rows array is being modified as I expect and debug markup to confirm the DOM order which is not consistent. The inconsistency is repeatable with the new rows appearing at about half as many rows down as I would expect from the index; I wonder if the logic that finds the DOM insertion point for the new DOM elements is getting it wrong.

What's causing this behavior? How can I fix it?

PS

In this failing case c:payment creates a <tr> inside a <tbody>. I have similar code creating a <div> inside a <div class="slds-grid"> that doesn't have this problem.

PPS

Changed to using <div> and that didn't help.

1

Found the cause of the problem.

The c:payment component had this markup:

<aura:component>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <c:service aura:id="service"/>
</aura:component>

and changing to this markup fixed the problem:

<aura:component>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <c:service aura:id="service"/>
    </tr>
</aura:component>

The c:service component follows the "Creating Data Services" pattern described in Modularizing Code in Lightning Components so nominally does not contribute to the DOM as it only contains aura:method declarations. But its location is significant in this case.

Having wasted a lot of hours on this, a rule I will follow in future is to make sure all components have a single element at their root that contains all the HTML and all other referenced components.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.