1

I am running through a test project from trailhead. I am attempting to create a restaurant locator component. The issue is the iterator and clicking on an item to then remove or put back a class that hides some information. The issue is that when I go to the event in the controller the event will not return anything using event.currentTarget. I am expecting currentTarget to return the li tag but there isn't anything. So when I use querySelector this errors as not a function. This is code on trailhead and I can't find anyone else with the sames issue so I am wondering is there something I haven't set up in my org?

Component:

      <div class="slds-scrollable--y scroll-container" aura:id="scrollableArea">
      <ul class="slds-list--vertical slds-has-dividers--top-space">
          <aura:iteration items="{!v.restaurantList}" var="item" indexVar="i">
              <li class="slds-list__item" onclick="{!c.showDetails}" data-record="{!i}">
                  <h3 class="slds-text-heading--small slds-m-bottom--x-small">{!item.name}</h3>
                  <img src="{!item.ratingImg}" alt="" class="ratingStars" />
                  <div class="slds-hide" data-details="{!i}">
                      <ul class="slds-list--vertical">
                          <li class="slds-list__item">{!item.address}</li>
                          <li class="slds-list__item">{!item.city}, {!item.state}</li>
                          <li class="slds-list__item">{!item.phone}</li>

Controller:

showDetails: function (component, event, helper) {
    var closeItem = component.get('v.openItem');
    if (closeItem) {
        closeItem = closeItem.querySelector('[data-details]');
        $A.util.addClass(closeItem, 'slds-hide');
    }
    var selectedItem = event.currentTarget;
    var theEvent = event;
    var comp = component;
    component.set('v.openItem', selectedItem);
    var itemDetails = selectedItem.querySelector('[data-details]');
    $A.util.removeClass(itemDetails, 'slds-hide');
}

I have another really stripped down example which I assume would work and allow me to at least use querySelector but it still fails and I really don't know what the issue is.

Component:

<aura:component >
<aura:attribute name="list" type="String[]" default="Item 1, Item 2, Item 3"/>
<aura:attribute name="selected" type="String[]"/>

<ul>
<aura:iteration items="{!v.list}" var="l">        
    <li class="slds-list__item" onclick="{!c.showDetails}">
        <h3 class="slds-text-heading--small slds-m-bottom--x-small" >{!l}</h3>
    </li>
  </aura:iteration>
  </ul>
</aura:component>

Controller:

({
  showDetails : function(component, event, helper) {
    var test = event.currentTarget;
    var testing = test.querySelector('dededfs');
  }
})

Any help would be greatly received.

Thanks

Paul

  • This will be fixed in the .12 patch which should be released in the next couple days. – TrevorBliss Jul 5 '16 at 21:56
  • Hi @Trevor Can you please give a look at salesforce.stackexchange.com/questions/130577/… event.currentTarget doesn't work for me when LS is activated (It works as expected when LS is deactivated). – SE_User Jul 12 '16 at 8:42
0

Looks like this is an ongoing issue with Locker Service. https://success.salesforce.com/issues_view?id=a1p3A00000183rMQAQ

The contents of aura:iteration and aura:if elements are in some respects being treated like they belong to the aura namespace and thus certain aspects are blocked. Note that in my own testing, event.target and event.srcElement are both working (returning the h3 not the li) but event.currentTarget is returning the locked element.

If I move the event handler from the li to the h3 it's perfectly happy which suggests that the locking issues are occurring on lowest-level DOM elements inside the iteration. Of course it is not valid HTML to wrap anything around a <li> so we run into some issues if we really need the handler to fire on a li.

If the Trailhead tutorials are throwing errors like this, turn off Locker Service in the org where you're doing tutorials and try again. If the code works you'll know it's not your fault at least! But when you're developing Lightning components to eventually go into production, turn Locker on and report bugs here. At this stage most of the critical bugs can be worked around one way or other but ideally they'll be fixed before it's mandatory.

  • Thanks for that but I have tried turning off and on the critical update for Locker Service but thee is no change in the trailhead org or my companies uat org. But yes in my testing I get a response using event.target when I move the click event onto the h3 rather than the li but the li contains more fields than he header and I really wanted all of those to trigger the click event. – P. Wilkins Jul 4 '16 at 13:56
  • Just to be sure, there's "Enable Lightning LockerService Security" and there's "Enable Lightning LockerService Security for Communities". The first is the one to try disabling. If you're turning it off and seeing no change, definitely talk to SF about it. I have tested on my dev account and I can definitely find the li with currentTarget when Locker is off. – Charles T Jul 5 '16 at 14:43
  • I can confirm this is no longer a problem in my dev edition org. – Charles T Jul 8 '16 at 13:09
  • @CharlesT Can you please take a look at salesforce.stackexchange.com/questions/130577/… this question? – SE_User Jul 13 '16 at 6:33

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.