With LockerService enabled, we are running into an aura:iteration
bug where the order is messed up depending on the values of the array. We're unable to find a work around.
In the component we have a table that calculates its values when a input field is blurred.
Step 1
When loaded initially, the table looks fine. Notice the 0 in the input field.
Step 2
Then I enter in a value, the table still looks fine.
Step 3
But then I go back and enter 0 again, how it was initially loaded, and the row breaks. The cell at index 13 jumps way ahead. The data in the console looks all in order.
If I enter any non-0 value, it works fine again.
This is my aura:iteration at the moment:
<aura:iteration items="{!v.data.totals}" var="value" indexVar="totalsRowIndex">
<span>
<td class="{! value == 'table-break' ? 'table-break' : 'slds-text-align--right' }">Index: {!totalsRowIndex} : {! value == 'table-break' ? ' ' : value }</td>
</span>
</aura:iteration>
The spans were added in desperation since it has fixed things with aura:iteration
quirkiness and aura:if
components before. For a moment it looked like we fixed it, but it turned out it was just the values we needed to enter to make it break that changed. Before we added the span, we entered other values to make it break.
Do you guys know what might be the issue? It looks like its a lightning bug since it was working before LockerService. Do you guys see any work arounds?