1

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" />
                    &quot;{!v.searchString}&quot; 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.

  • Do you mind sharing your code snippet? – Gaurav Kheterpal Jun 14 '16 at 17:42
0

Didn't realize the breaking change of slds-hide behavior in SLDS201 and Summer16 of lightning experience.

Removing slds-hide doesn't make a hidden element visible by default - we have add slds-show to bring it to foreground.

Documentation: https://www.lightningdesignsystem.com/components/utilities/visibility/

Problem solved after adding this logic.

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.