[SalesForce] Cannot get div element from lightning component when locker service is activated

I have the following component in my dev org:

<aura:component implements='forceCommunity:availableForAllPageTypes' access='global'>
    <div aura:id='myDiv' id='myDiv' access='global'>Hello World!</div>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
</aura:component>

with the following controller:

({
    doInit : function(component, event, helper) {
        var content = component.find('myDiv');
        debugger; 
    }
})

EDIT: and the following renderer:

({
  afterRender: function(component, helper) {
        var ret = component.superAfterRender();
        var content = component.find('myDiv');
        debugger;      

        return ret;
  },
  render: function(component, helper) {
        var ret = component.superRender();
        var content = component.find('myDiv');
        debugger;

        return ret;
  },
  rerender: function(component, helper) {
        var ret = component.superRerender();
        var content = component.find('myDiv');
        debugger;

        return ret;
  },
})

When I activate locker service, the content of my content variable in my controller is a

"SecureComponentRef: markup://aura:html {8:68;a} {myDiv}{ key: {"namespace":"myNamespace"} }"

On a SecureComponentRef there isn't any getElement() or getElements methods to access the DOM (to then bind some script).

I've tried the same function in different events, but I always get the Ref.

Being in the same namespace (aka the same component), why can't I access the SecureComponent instead?

(@Doug seems to say I should be able here: Why do some lightning components have more methods / properties than others)

Best Answer

This is because you are trying to access the DOM elements in the init handler before they have been rendered. Even if you use the native document.getElementById('myDiv') call inside the init handler with LockerService disabled, you'll get null back.

If you move your find('myDiv') call to a button click handler it will return the correct SecureComponent object.

Also, the access="global" on a div element won't do anything useful. That property is specifically for Aura types (components, attributes, etc).

Edit (Nov. 16):

From Doug's comment, for situations similar to this you may want to explore custom renderers. Handle with care though.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_renderers.htm?search_text=renderer

Related Topic