3

I am facing an issue with the Locker service. I have a simple piece of code which retrieves a DOM element in the same namespace. I have attached the code here. The issue is that if the Locker service is disabled, I am able to read the element and the console output is as shown in the screenshot. Whereas, if it is enabled, the element is displayed as blank on the console output. I have attached both screenshots as well as the code. Summer 16 - Salesforce version

TestLightningApp.app

<aura:application >
    <ui:inputText aura:id="myInput"/>
    <br/><br/>
    <button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:application>

TestLightningAppController.js

({
    getInputDOM : function(component, event, helper) {
        console.log(component.find("myInput"));
    }
})

Console log output: Locker service is disabled enter image description here

Console log output: Locker service is enabled enter image description here

Improve this question

4 Answers 4

Reset to default
2

Component.find(auraId) does not yield a DOM element it always returns a component. You can no longer (never should have been allowed to in the first place but Lightning without Locker is like speed limits with without law enforcement) access the internal implementation of a component you do not own (e.g. getElement() to make an implicit dependency that is 100% unsupportable encapsulation breakage). With components you need to interact with them by their public API only (methods, attributes, and events).

Improve this answer
2
  • Thanks for the quick response. What is the best way to access component HTML? For example i have one HTML table in my aura component and i want to read it's tr and td onclick of button. i am using document.getElementById('TableId') and it's not working with locker service. it's returning undefined.
    – Sagar Thoriya
    Commented Oct 4, 2016 at 12:45
  • @thoriyas document.getElementById() will still work with LockerService enabled. Since this is a DOM API rather than an Aura/Lightning API, make sure your element in the component markup has its 'id' property set to 'TableId' instead of the 'aura:id' property. Please take note, however, of what Doug says about trying to access internals of components you do not own. If the 'TableId' element is not created by a component in your namespace (thus, you do not have access), getElementById will still return undefined.
    – TrevorBliss
    Commented Oct 10, 2016 at 23:10
1

Thats seems like proper behaviour to me .

You will need to wrap everything into a component and use component inside your aura:application.Lets name it as InputCmp.cmp

<aura:component>
<ui:inputText aura:id="myInput"/>
<br/><br/>
<button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:component/>

And your controller code is as below

InputCmpController.js

({
  getInputDOM : function(component, event, helper) {
    console.log(component.find("myInput"));
   }
 })

The application would be like below

<aura:application >
  <c:InputCmp/>
</aura:application>
Improve this answer
1
  • Thanks for the your input. I have tried as you suggest but it's returning the same result.
    – Sagar Thoriya
    Commented Oct 4, 2016 at 12:48
1

I could not reproduce it. Using console.log(component.find("myInput").get("v.value")); I was able to get the value of the field both in Summer '16 and Winter '17 with LockerService activated.

Improve this answer
0

Thats seems like proper behaviour to me .

You will need to wrap everything into a component and use component inside your aura:application.Lets name it as InputCmp.cmp

<aura:component>
<ui:inputText aura:id="myInput"/>
<br/><br/>
<button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:component/>

And your controller code is as below

InputCmpController.js

({
  getInputDOM : function(component, event, helper) {
    var inputValue = component.find("myInput").get("v.value");
    console.log(inputValue);

   }
 })
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .