6

What are the actions that might destructively interfere with the lightning app's lifecycle? Is a breakpoint\debugger statement one of such?

For example there is a case that I happen to meet regularly after Winter 17 release (everything below is performed with Locker Service on, switching it off is not an option). Assume we have some component with an init event handler and "select" element:

...
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<select aura:id="select-element" class="slds-select" onchange="{!c.handleSelect}"></select>

And here's an "init" handler:

doInit : function(component, event, helper) {
    // do smth
    debugger; // this can be a debugger statement or manually put browser's breakpoint
}

If we happen to have an open console and we catch this breakpoint (immediately resuming it, or not) - in any time later there's no chance to get access to element:

...
component.find("select-element").getElement;

Same happens with div element's, maybe with others.

With absolutely same component's layout and js-controller\helper etc. but with browser's console closed (hence the breakpoint isn't caught) getElement function is there and some code that depends on it will execute successfully.

EDIT: the DOM element is there already (meaning if I use afterRender or some custom button to get a breakpoint far after the init() was executed), I can see it and interact with it - but the getElement function nevertheless is unreachable at that same moment.

Improve this question
3
  • 1
    getElement is actually a function as mentioned in the docs, can you try component.find("select-element").getElement() – Praveen Nov 3 '16 at 17:24
  • @Praveen yes, it is a function. But it is not always accessible. And to check if it is - we invoke it from a component's object as a property - you receive an "undefined" in case this function isn't accessible or it simply was never meant to be there. Otherwise (invoking it as a function if it is not accessible) - we receive an exception. – agnitsevich Nov 3 '16 at 19:33
  • Can you explain why you are trying to get the element in the init method? – Calvin OKeefe Jan 23 '19 at 20:53
13

You are hitting a timing issue with init that is by design - you should not use component.getElement() in init because elements are not reliably available in init handlers - you'll want to look into using a custom renderer afterRender method which gets called at a point where you are guaranteed to have actual DOM elements available and was designed for exactly this ind of scenario.

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

Improve this answer
2
  • Thanks, but that is not the issue. I tried afterRender, doneRendering events. Tried paused callback, tried new action, e.g. a breakpoint on a custom button click.. all the same. – agnitsevich Nov 3 '16 at 19:30
  • And - most improtantly - the DOM element is there already (meaning if I use afterRender or some custom button to get a breakpoint far after the init() was executed), I can see it and interact with it - but the getElement function nevertheless is unreachable at that same moment. – agnitsevich Nov 3 '16 at 19:38
1

You can’t use cmp.find("").getElement() to access the DOM element created by lightning:button etc. Lightning Locker doesn’t allow c:domLocker to access the DOM for lightning:button etc because the button(or any other standard component) is in the lightning namespace and c:domLocker is in the c namespace.

Improve this answer
-6

You have Locker Service activated, that is the problem. The result object of cmp.find didn't have getElement function on it. Try deactivating Locker Service

Improve this answer
2
  • 8
    Note that deactivating Locker Service is not a viable long term fix. – Adrian Larson♦ Dec 7 '16 at 19:16
  • 1
    Yes, as @AdrianLarson said deactivating it is not a solution - sooner or later it is going to become mandatory and it won't be possible to disable it. – agnitsevich Dec 8 '16 at 8:08

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.