+ Start a Discussion
tonante27tonante27 

Unwanted Duplicate Dynamic List being generated for Lightning Component

Help please!:  I have successfully created two different combo boxes in a lightning component. The first one displays account records using autocompletion while the second combo box displays user records  using autocompletion. However when I type a user's name in the second combo box I notice that not only do I get a list of user records underneath the second (User) combo box, but I also get that same list of user records listed underneath the first (Account)  combo box. I only want the dynamic list to appear underneath the second (User) combo box when I am searching for a specific group of users when using autocompletion .  Thanks. Let me know if you need additional code. 
 
Best Answer chosen by tonante27
tonante27tonante27
Ok I discovered what might be the probelm.
  •  I need to set the  following
    id="listbox-unique-id
    to 
    id="listbox-unique-#

    Where # is set  to some alphanumeric number like '02' or '01'.
  • I need to also make sure that copy certain component attribute varaibles  from the Account object and create them for the BDM ( User object ) where I affix 'BDM' string to the end of those variables.
  • I need to do the same for the functions in the Handler. ( I know there could be a more convieniet way to do this without duplication so much code but I want to make sure it works before I attempt that.)
To prove this I did a portion of the two steps mentioend above and was able to see that the dynamic liust was only positioned  under the combo box where I performed the autocompletion search..​​​​​​

All Answers

Rishabh Bansal 23Rishabh Bansal 23
Hi, Please send the code for both the combobox fields.
tonante27tonante27
HI Rishabh , here are both the component comboboxes : Thanks 
 
<<USER BOX>>:
 <div class="slds-form-element slds-size_1-of-2 slds-m-horizontal_small">
<div class="slds-form-element-label">
<output value="BDM Sender" class="slds-form-element-label"></output>
</div>
<div class="slds-combobox_container slds-has-inline-listbox ">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" 
aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<div> 
<aura:if isTrue="{! empty(v.bdmId) }"> 

<input type="text" class="slds-input slds-combobox__input" id="combobox-unique-2id" 
aria-activedescendant="listbox-option-unique-id-02" aria-autocomplete="list" 
aria-controls="listbox-unique-2id" autocomplete="on" role="combobox" 
placeholder="{!v.placeholderBDM}" value="{!v.bdmName}"
onkeyup="{!c.serverCallBDM}" label="BDM Sender"/>
</aura:if>
<aura:if isTrue="{! !empty(v.bdmId) }">
<span class="slds-pill slds-pill_link fullWidth slds-m-around_xx-small"> 
<a href="javascript:void(0);" 
class="slds-pill__action slds-p-left_small slds-p-right_small" title="{!v.bdmName}">
<lightning:icon iconName="{!v.lookupIconBDM}" size="small"/>
<span class="slds-pill__label slds-p-left_small slds-p-right_small">{!v.bdmName}</span>
</a>
<button onclick="{!c.clearSelectionBDM}" 
class="slds-button slds-button_icon slds-button_icon slds-pill__remove" 
title="Remove">
<lightning:icon iconName="utility:close" size="small" 
alternativeText="Press delete or backspace to remove"/>
<span class="slds-assistive-text" >Remove</span>
</button>
</span> 

</aura:if> 
</div> 
</div>
<aura:if isTrue="{! greaterthanorequal(v.server_result.length,1) }"> 
<div id="listbox-unique-id" role="listbox">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation"
style="display: block; min-width: auto; max-width: 100% ; width: 100%;">
<aura:iteration items="{!v.server_result}" var="item" indexVar="i">
<li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}" id="{#i}" 
onclick="{!c.itemSelectedBDM}">
<span id="{#'User_'+i}" 
class="slds-media-listbox__option slds-listbox__option_entity 
slds-listbox__option_has-meta" 
role="option">
<span class="slds-media__figure optionIcon">
<span class="slds-icon_container" >
<lightning:icon iconName="{#v.lookupIconBDM}" size="small"/>
<span class="slds-assistive-text">User</span>
</span>
</span>
<span class="slds-media__body singleRow">
<span 
class="optionTitle slds-listbox__option-text 
slds-listbox__option-text_entity" >{#item.SObjectLabel}</span>
</span>
</span>
</li>
</aura:iteration> 
</ul>
</div>
</aura:if> 
</div>
</div>

</div>

<<ACCOUNT BOX>>:

 <div class="slds-form-element slds-size_1-of-2 slds-m-horizontal_small">
<div class="slds-form-element-label">
<output value="Account" class="slds-form-element-label"></output>
</div>
<div class="slds-combobox_container slds-has-inline-listbox ">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" 
aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
<div> 
<aura:if isTrue="{! empty(v.accountId) }"> 
<input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id" 
aria-activedescendant="listbox-option-unique-id-01" aria-autocomplete="list" 
aria-controls="listbox-unique-id" autocomplete="on" role="combobox" 
placeholder="{!v.placeholder}" value="{!v.accName}"
onkeyup="{!c.serverCall}" label="Account"/>
</aura:if>
<aura:if isTrue="{! !empty(v.accountId) }">
<span class="slds-pill slds-pill_link fullWidth slds-m-around_xx-small"> 
<a href="javascript:void(0);" 
class="slds-pill__action slds-p-left_small slds-p-right_small" title="{!v.accName}">
<lightning:icon iconName="{!v.lookupIcon}" size="small"/>
<span class="slds-pill__label slds-p-left_small slds-p-right_small">{!v.accName}</span>
</a>
<button onclick="{!c.clearSelection}" 
class="slds-button slds-button_icon slds-button_icon slds-pill__remove" 
title="Remove">
<lightning:icon iconName="utility:close" size="small" 
alternativeText="Press delete or backspace to remove"/>
<span class="slds-assistive-text" >Remove</span>
</button>
</span> 

</aura:if> 
</div> 
</div>
<aura:if isTrue="{! greaterthanorequal(v.server_result.length,1) }"> 
<div id="listbox-unique-id" role="listbox">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation"
style="display: block; min-width: auto; max-width: 100% ; width: 100%;">
<aura:iteration items="{!v.server_result}" var="item" indexVar="i">
<li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}" id="{#i}" 
onclick="{!c.itemSelected}">
<span id="{#'Account_'+i}" 
class="slds-media slds-listbox__option slds-listbox__option_entity 
slds-listbox__option_has-meta" 
role="option">
<span class="slds-media__figure optionIcon">
<span class="slds-icon_container" >
<lightning:icon iconName="{#v.lookupIcon}" size="small"/>
<span class="slds-assistive-text">Account</span>
</span>
</span>
<span class="slds-media__body singleRow">
<span 
class="optionTitle slds-listbox__option-text 
slds-listbox__option-text_entity" >{#item.SObjectLabel}</span>
</span>
</span>
</li>
</aura:iteration> 
</ul>
</div>
</aura:if> 
</div>
</div>

</div>

 
tonante27tonante27
To clarify here is what I mean using screen scrapes:  The left one shows the combo box for the Accounts with its dynamic list results  while the one on the right  (somewhere underneath the Account' combo box and its dynamic results) shows the Users (BDM Sender) combo box with its dynamic list results. Note when a search is done on one combo box the other combo box gets the same results underneath it.
Duplicate Dynamic lists for different combo boxes.

 
tonante27tonante27
Ok I discovered what might be the probelm.
  •  I need to set the  following
    id="listbox-unique-id
    to 
    id="listbox-unique-#

    Where # is set  to some alphanumeric number like '02' or '01'.
  • I need to also make sure that copy certain component attribute varaibles  from the Account object and create them for the BDM ( User object ) where I affix 'BDM' string to the end of those variables.
  • I need to do the same for the functions in the Handler. ( I know there could be a more convieniet way to do this without duplication so much code but I want to make sure it works before I attempt that.)
To prove this I did a portion of the two steps mentioend above and was able to see that the dynamic liust was only positioned  under the combo box where I performed the autocompletion search..​​​​​​
This was selected as the best answer