I am trying to use Lookup component by Tony Scott from github. Component works perfectly when used in a standalone app but the search result list doesn't render when added to the record home page. Html is properly being rendered but it looks like it is going under the other components below or something like that. User cannot see the list. I tried fixing component height in record home - with no luck on seeing search result. No errors in Js console either. This is the same markup provided on slds.
I am trying to build by first lightning component - any advise is greatly appreciated.
Code
<div class="slds">
<div aura:id="lookup-div" class="slds-lookup" data-select="single" data-scope="single" data-typeahead="true">
<!-- This is the Input form markup -->
<div class="slds-form-element">
<label class="slds-form-element__label" for="lookup">{!v.label}</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
<c:svg class="slds-input__icon" xlinkHref="/resource/SLDS092/assets/icons/utility-sprite/svg/symbols.svg#search" />
<!-- This markup is for when an item is currently selected -->
<div aura:id="lookup-pill" class="slds-pill-container slds-hide">
<span class="slds-pill slds-pill--bare">
<span class="slds-pill__label">
<c:svg class="{!'slds-icon ' + v.listIconClass + ' slds-icon--small'}" xlinkHref="{!v.listIconSVGPath}" />{!v.searchString}
</span>
<button class="slds-button slds-button--icon-bare" onclick="{!c.clear}">
<c:svg class="slds-button__icon" xlinkHref="/resource/SLDS092/assets/icons/utility-sprite/svg/symbols.svg#close" />
<span class="slds-assistive-text">Remove</span>
</button>
</span>
</div>
<!-- This markup is for when searching for a string -->
<ui:inputText aura:id="lookup" value="{!v.searchString}" class="slds-input" updateOn="keyup" keyup="{!c.search}" />
</div>
</div>
<!-- This is the lookup list markup. Initially it's hidden -->
<div aura:id="lookuplist" class="slds-lookup__menu slds-hide" role="listbox">
<div class="slds-lookup__item">
<button class="slds-button">
<c:svg class="slds-icon slds-icon-text-default slds-icon--small" xlinkHref="/resource/SLDS092/assets/icons/utility-sprite/svg/symbols.svg#search" />
"{!v.searchString}" in {!v.pluralLabel}
</button>
</div>
<ul aura:id="lookuplist-items" class="slds-lookup__list" role="presentation">
<aura:iteration items="{!v.matches}" var="match">
<li class="slds-lookup__item">
<a id="{!globalId + '_id_' + match.SObjectId}" role="option" onclick="{!c.select}">
<c:svg class="{!'slds-icon ' + v.listIconClass + ' slds-icon--small'}" xlinkHref="{!v.listIconSVGPath}" />{!match.SObjectLabel}
</a>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
Relevant JS
if (cmp.isValid() && state === "SUCCESS")
{
// Get the search matches
var matches = response.getReturnValue();
// If we have no matches, return nothing
if (matches.length == 0)
{
cmp.set('v.matches', null);
return;
}
// Store the results
cmp.set('v.matches', matches);
Complete code is posted by Tony Scott on Github
Update Code on Github is working with SLDS104. When switched to SLDS201, lookup stops working. Exact same behavior as in Lightning experience even in standalone app using SLDS201. Looks like Summer16 is using SLDS201 - and ignores any previous versions included in components.
