Lightning Component aura:iteration is throwing error upon rerendering

Question

I have created a lightning app with a text box and list of contacts under it.As user types in the search string,List contents should be filtered.But I am receiving following error upon typing the search string-rerender threw an error in 'markup://aura:iteration' : Cannot read property 'childNodes' of null.I came across-"Lightning: Bug in Lightning framework when using aura:renderIf?" but not sure if it is the same reason for this behavior.Could anyone point out the error in my below code.

Component to display list of filtered contacts-ContactItemList.cmp

<aura:component controller="ContactItemListController" >
<ltng:require styles="/resource/EquinixBootstrap/equinixbootstrap.css" scripts="/resource/Bootstrapjs/bootstrap.min.js" />    
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />   
<aura:handler event="c:PFAppEvent" action="{!c.doInit}"/>   
<aura:attribute name="contacts" type="Contact[]"/>    

<aura:iteration items="{!v.contacts}" var="p">
    <c:ContactItem fullName="{!p.Name}" accountName="{!p.Account.Name}" />        
</aura:iteration> 

Component to type in the search string-SearchComponent.cmp

<aura:component >
<ltng:require styles="/resource/EquinixBootstrap/equinixbootstrap.css" scripts="/resource/Bootstrapjs/bootstrap.min.js,/resource/jQuery/jquery-1.11.3.min.js" afterScriptsLoaded="{!c.loadJQuery}"/>    
<aura:registerEvent name="PFAppEvent" type="c:PFAppEvent"/>

<input type="text" style="width:100%;" class="form-control" placeholder="Name or Username" id="searchBox" />

Helper method to call Server Side controller and fetch matching contacts-ContactItemListHelper.js

({ getContacts: function(component,event) {

    var action = component.get("c.getContacts");
    var searchString;
    if(typeof event != 'undefined'){
        searchString=event.getParam("searchString");
    }else{
        searchString='';
    }
    console.log('Contact List Item:'+searchString);
    action.setParams({
        "searchString": searchString
    });
    action.setCallback(this, function(a) {
        component.set("v.contacts", a.getReturnValue());
    });
    $A.enqueueAction(action);
}    })

Listener to Search Component-SearchComponentController.js

({
loadJQuery: function(component, event, helper) {
    console.log('I am loaded');
    var lastValue = '';
    setInterval(function() {
        if ($("#searchBox").val() != lastValue) {
            lastValue = $("#searchBox").val();
            console.log('New Value:'+lastValue);
            var appEvent = $A.get("e.c:PFAppEvent");
            appEvent.setParams({ "searchString" : lastValue });
            appEvent.fire();                
        }
    }, 1500);        
} })

Answer 1

It's possible it's the same bug. Try wrapping your component with a span, see if it goes away.

<aura:iteration items="{!v.contacts}" var="p">
  <span>
    <c:ContactItem fullName="{!p.Name}" accountName="{!p.Account.Name}" />        
  </span>
</aura:iteration>

Obviously if this fixes it, it's not your issue it is the frameworks issue and should be solved here soon.

Answer 2

After spring 17 release <SPAN> solution will not work.

You will receive the following error in Spring 17 Release:

This page has an error. You might just need to refresh it. render threw an error in 'markup://aura:html' [The HTML tag 'SPAN' is not allowed.] Failing descriptor: {markup://aura:html}

Workaround : Use <Div> tag instead of <SPAN> tag as in the following example:

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
    <DIV>
    <aura:iteration items="{!v.testingArray}" var="opp">
        {!opp.name} <br/>
    </aura:iteration>
    </DIV>
    <aura:set attribute="else">
        Array empty
    </aura:set>
</aura:renderIf>