3

There's a question already asked regarding this here Issue with event.currentTarget

According to Salesforce Known Issues , they've updated that it has already been fixed in almost all the servers (except eight as of now). But, for me it's still not working (it has already been shown as fixed in the instance I'm working on).

My code is as follows:-

Component:-

<div class="slds-form-element__icon" onclick ="{!c.displayPopup}">

Controller:-

displayPopup : function(component) {
        component.set("v.isDisplayPopup", true);
    }

Renderer:-

({
    rerender: function(component, helper) {
        this.superRerender();   
        helper.renderPopup(component, helper);
    }   
})

Helper:-

renderPopup : function(component, helper) {
        if(component.isValid() && component.get("v.isDisplayPopup")) {          
            var selectedItem = event.currentTarget;
            var svgElement = selectedItem.querySelector("svg");
            var scrollableWrapElement = document.getElementsByClassName('scrollableWrap')[0];                                   
            var position = this.getPosition(svgElement);
            var wrapperPosition = this.getPosition(scrollableWrapElement);
            var notesPanelComponent = component.find('notesPanel').getElement();
            var noteObject = notesPanelComponent.querySelectorAll("div")[selectedItem.dataset.rownumber];            
            for(var i=0; i<document.querySelectorAll(".notes").length-1; i = i + 1){

                document.querySelectorAll(".notes:not(#\\3"+noteObject.id+")")[i].classList.remove('slds-visible');    

                document.querySelectorAll(".notes:not(#\\3"+noteObject.id+")")[i].classList.add('slds-hidden');         
            }
            noteObject.classList.toggle('slds-visible');
            noteObject.style.top = position.top - wrapperPosition.top + 35+"px";
            noteObject.style.left = position.left - wrapperPosition.left -127+"px";
            component.set("v.isDisplayNotes", false);
        }
}

When I click on that particular, it throws an error saying [TypeError: Cannot read property 'currentTarget' of undefined]

The event is undefined!

Can anyone tell me why am I not able to access the same here?

Is there any way so that I would be able to access the clicked DOM element from helper?

PS:- I'm trying to access the event.currentTarget from the helper via renderer (and not directly from controller) is because DOM manipulation is involved(which cannot be done outside the rendering lifecycle as per the Lightning Developer Guide), once I get the DOM element.

0

The code you list above would not work with LS deactivated - not an LS issue - renderer methods never receive events of any kind (component, helper) is the supported signature. This is not related to the other SE thread you referenced.

Why are you using a custom renderer at all for this instead of simply handling the event directly in the controller action method?

  • 1
    Hi @Doug It's because there's DOM manipulation involved. I've read in the Lightning Developer Guide that you're not supposed to make DOM manipulation outside the rendering lifecycle (except if aura default methods are used). Also, this worked before(and still works) when locker is deactivated, so I thought it was linked to the other one. – SE_User Jul 8 '16 at 12:54
  • 1
    Hi @RowanChristmas Thanks for the suggestion. Yes, I can do that (and I'm doing that too). But my requirement here is to display popup with dynamic contents at dynamic postions whose coordinates are manually calculated (using getPosition in JavaScript) and on click, the dynamic data is populated and then displayed. – SE_User Jul 11 '16 at 5:26
  • 1
    @Doug Chasman I am able to access event.currentTarget from helper (Invoked from rerender) when locker service is deactivated and without passing event. – Junaid P Khader Jul 12 '16 at 8:24
  • 3
    @RowanChristmas These libraries register event handlers and modify the DOM outside of the lightning renderer lifecycle. This can cause undefined behavior and breaks security policy. This was one of the statements which was given by the Salesforce team after security review. So, I'm very much concerned on manipulating DOM outside the rendering lifecycle myself (or using external libraries which manipulates the same or which are not compatible in JavaScript strict mode) which cannot be done using aura utils functions or so. – SE_User Jul 15 '16 at 6:52
  • 1
    @AravindAjith That's a super unhelpful answer... and it feels like the presence of LockerService should make it so this sort of thing is not a problem. It's not like Angular/React aren't modifying the DOM outside the render lifecycle, and they're called out as one of the benefits of Locker Service :) I'm going to talk to my local user group Monday to see if anyone has contacts I can use to get some clearer answers. – Rowan Christmas Jul 15 '16 at 16:53

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.