I am having an issue when using NiceScroll (GIT Hub) when locker service is enabled.
If the locker is turned off, it work's fine.
Code:-
Component:
<ltng:require scripts="{!join(',',
$Resource.namespace__StaticResourceName + '/scripts/jQuery_V1.js',
$Resource.namespace__StaticResourceName + '/scripts/nicescroll.js'
)}" afterScriptsLoaded="{!c.scriptsLoaded}" />
<aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>
<div class="slds-form-element__control textarea-wrapper">
<ui:inputTextArea value="{!v.newVF.namespace__Notes__c}" aura:id="editModeScrollBarY" maxlength="255"
class="slds-textarea scrollbar-outer"/>
</div>
Controller:
scriptsLoaded : function(component, event, helper) {
component.set("v.isResourcesLoaded", true);
}
Helper:
addScroll : function(component){
if(component.isValid() && component.get("v.isResourcesLoaded")){
$(".scrollbar-outer").niceScroll({
boxzoom:false,
autohidemode:false,
cursorcolor:"#9c9c9c",
nativeparentscrolling: true
});
}
}
Renderer:
({
afterRender: function(component, helper) {
this.superAfterRender();
},
rerender: function(component, helper) {
this.superRerender();
helper.addScroll(component);
}
})
isResourcesLoaded is a Boolean attribuite which I'm setting as true in afterScriptsLoaded (to make sure that the external scipts uploaded as static resources have loaded).
Also, I'm calling the addScroll
function from the renderer to make sure that the DOM elements have also loaded successfully before adding scroll to a DOM element.
The above code works fine when locker service is not active.
It would be very helpful if anyone can provide a solution to solve this issue.
Also, is there any alternative to add scroll to a textarea with LS active for Salesforce-1?
Best Answer
When locker service is in place, the golden rule is:
Why this is enforced?
It is mainly to preserve the component encapsulation, so that developer can not accidentally/intentionally access the other developers component(one's they do not own) or even in worst case break other components functionality and also others security related stuffs are involved too.
Here a blog which details constraints imposed to access DOM, when locker service is in place.
Since the
<ui:inputTextArea/>
component belongs to the ui namspace, to which do not have access to its DOM.To solve this, you can use the<textarea/>
HTML tag instead of the former.Below is the code which I tried:
Jquery - V2.2.4
Nicescroll - V3.6.8
Component:
Controller.js
Helper:
Renderer:
--Update--
Even though the native scrollbar is replaced with custom scroll but I tried few things to make the content inside the textarea to scroll with locker service turned on but it did not work. :-(
P.S: I observe the same behaviour in SF1 too.