component.find an aura:id item created in aura:iteration

Question

I am building a menu component.

One menu-item is a sub-menu with list of opportunities, this list is created with aura:iteration over a list of opportunities.

When selecting a menu or a sub-menu, I need to make it look selected (change css attribute). For this to happen, I need to find this menu item in my controller.

If I add id attribute to my item markup and use the event attribute on my controller (event.currentTarget.id), I can catch the item itself and change it's style, this works:

MARKUP

<aura:iteration items="{!v.opportunities}" var="opp">
    <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}">
            <span class="slds-truncate" title="{!opp.Name}">{!opp.Name}</span>
        </a>
    </li>
</aura:iteration>

CONTROLLER

openItemFromMenu: function(component, event, helper) {
    // get the id
    var oppId = event.currentTarget.id;
    // choose it (select menu)
    var selectedItemNew = component.find(oppId);
    selectedItemNew.style = "background: rgb(216, 237, 255);"
}

PROBLEM

when I try to change the menu selected not from the click of the item (event that is triggered from another page) - I have added an event handler to change the menu item, and I send the opportunity id through that event. Then (after adding aura:id to my item, I am trying to find this menu item of this oppId with component.find in my controller - this does not work:

CHANGED MARKUP

add:
<aura:handler name="eventSelectMenuItem" event="c:myEvent" action="{!c.openItemFromMenu}" />
change:
<a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}" aura:id="{!opp.Id}">

CHANGED CONTROLLER

openItemFromMenu: function(component, event, helper) {
    // get the id from the event
    var oppId = event.getParam("recordId");
    // choose it (select menu)
    var selectedItemNew = component.find(oppId);
    selectedItemNew.style = "background: rgb(216, 237, 255);"
}

QUESTION

Does component.find for aura:id within an aura:iteration suppose to work?

If not - is there a workaround?

If it does suppose to work - what am I doing wrong?

Answer 1

aura:id must be a literal value. As such, you can't use an expression in aura:id (it will be treated as literal text). Instead, you can use the element's id via document.getElementById:

var selectedItemNew = document.getElementById(oppId);

Answer 2

First problem is that we cannot use expression while assigning aura:id. Aura:id need to be static.

so your first change is

<a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}" aura:id="link">

in js you can do

    openItemFromMenu: function(component, event, helper) {
        // get the id from the event
        var oppId = event.getParam("recordId");
        // choose it (select menu)
        var selectedItemsNew = component.find('link').getElements();
        if(Array.isArray(selectedItemsNew)){
            var selectedItemNew = selectedItemsNew.find(function (oneItem){
return oppId === selectedItemsNew.id})
           if(selectedItemNew){
              selectedItemNew.style = "background: rgb(216, 237, 255);"
           }
        } else if(selectedItemsNew){
          if(oppId === selectedItemsNew.id){
             selectedItemNew.style = "background: rgb(216, 237, 255);"
          }
        }

    }

Instead of adding style directly you can create a class and use

$a.util.addclass()

Answer 3

I don't know if it will work for you, but what worked for me was just assigning the same static aura:id to each element in the iteration, and then when you use component.find() it will return an array of all the elements.