12

I am having problem when using mCustomScrollbar (GIT Hub) when locker service is activated. During initialization of mCustomScrollbar in the helper, it throws the following error

[TypeError: Cannot create property 'jQuery17209760322836087683' on boolean 'true']

Everything works fine when LOCKER SERVICE is DEACTIVATED.

Please find the code below:-

Component:

<ltng:require scripts="{!join(',',
           $Resource.namespace__StaticResourceName + '/scripts/jQuery_V1.js',
           $Resource.namespace__StaticResourceName + '/scripts/Jquery.mousewheel.min.js',
           $Resource.namespace__StaticResourceName + '/scripts/Jquery.mCustomScrollbar_V1.js',
           $Resource.namespace__StaticResourceName + '/scripts/ScrollBar.js'
           )}" afterScriptsLoaded="{!c.scriptsLoaded}" />

<aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>

 <div class="slds slds-grid slds-wrap scrollableWrap">
    <div class="slds-col slds-size--1-of-1 slds-m-top--small scrollable">
            <table class="slds-table slds-table--bordered" id="myTable" width="100%">
                <tr align="center">
                    <th width="" class="slds-cell-wrap slds-text-align--left" scope="col">
                        <b> Name </b>
                    </th>
                    <th width="" class="slds-cell-wrap slds-text-align--right" scope="col">
                        <b> Amount <br/> </b>
                    </th>                   
                </tr>

            <tbody>
                <aura:iteration items="{!v.subordinateDetail}" var="data" indexVar="row" >
                    <tr>
                        <td align="left" class="slds-cell-wrap slds-text-align--left">
                            <ui:outputText value="{!data.name}" />
                        </td>
                        <td align="right" class="slds-cell-wrap slds-text-align--right">
                            <ui:outputText value="{!data.amount}" />
                        </td>                   
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</div>

Controller:

scriptsLoaded : function(component, event, helper) {
        component.set("v.isResourcesLoaded", true);
}

Helper:

    scrollbar : function(component){
       if(component.isValid() && component.get("v.isResourcesLoaded")){
            $('.scrollable').mCustomScrollbar({
                 axis: 'y',
                 contentTouchScroll: 25,
                 advanced: {autoExpandHorizontalScroll:true},
           });
            $('.scrollableWrap').mCustomScrollbar({
                 axis: 'x',
                 contentTouchScroll: 25,
                 advanced: {autoExpandHorizontalScroll:true},
            });
       }
    }

Renderer:

({
    afterRender: function(component, helper) {
        this.superAfterRender();                    
    },
    rerender: function(component, helper) {
        this.superRerender();   
        helper.scrollbar(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 scrollbar function from the renderer to make sure that the DOM elements have also loaded successfully.

The above code works fine when locker service is not activated.

But when LS is activated, it throws error.

I had to use mCustomScrollbar as Salesforce still hasn't fixed the Lightning Design System scroll functionality for Salesforce-1.

  • 3
    Would you mind highlighting your exact, specific question and the answer you're looking for ? Please consider that no one here can give any ETA on salesforce internal developments. – Samuel De Rycke Sep 16 '16 at 11:56
  • @SamuelDeRycke Thanks a lot for your response. Since the default SLDS scroll is not working in Salesforce1 app, I'm using mCustomScrollbar to enable scroll functionality which works fine when Locker Service isn't activated. But when Locker Service is activated, it throws an error as I have mentioned in the question. I'm not able to figure out the root cause. Can you please help solve this issue? Also, it would be very much helpful if you could suggest any workaround (for adding scroll functionality which is Locker Service compatible). – SE_User Sep 16 '16 at 12:21
  • Does anyone know a solution or any workaround to this issue? – SE_User Oct 6 '16 at 12:51
  • 1
    I'd still recommend you try to alter the question. Do you understand the error ? There may be other libraries that achieve the same, or you could write your own within the security considerations applicable. – Samuel De Rycke Oct 9 '16 at 18:39
  • Thanks a lot for responding @SamuelDeRycke . Can you please suggest an external library similar to this which works when Locker Service is activated? (I've tried jQuery nicescroll also which also throws error when LS is activated) Please see this salesforce.stackexchange.com/questions/140428/… It would be really helpful if you could suggest a workaround or any other libraries that achieve the same. Thanks a lot in advance. – SE_User Oct 13 '16 at 5:31
0

Please try using Salesforce Lightning CLI to identify issues related to locker service.

LockerService enforces several security features in your code.

  1. JavaScript ES5 Strict Mode Enforcement
  2. DOM Access Containment
  3. Restrictions to Global References
  4. Access to Supported JavaScript API Framework Methods Only You can access published, supported JavaScript API framework methods only. These methods are published in the reference doc app at https://yourDomain.lightning.force.com/auradocs/reference.app. In a future release, LockerService will be extended to cover additional security features.
  5. Stricter Content Security Policy (CSP)

PS: Salesforce recommends use of secure public API for document, window and element. Only secure APIs will be accessible when Locker Service is enabled even if it is working now it won't work in future. You would also want to go through this checklist if you want to submit your package to salesforce for security review.

  • 1
    Hi @SaurabhMishra I'm afraid this does not answer the question. I've clearly stated the issue above and also posted the code. Just in case if you haven't seen Custom Scroll not working when Locker Service is active – SE_User Dec 23 '16 at 13:43
  • 1
    @SE_User The library that you are trying to use was not written with locker service and its limitation in mind. So, try some other library or write your own. Use Salesfore Lightning CLI to identify the issues in your code. – Saurabh Mishra Dec 25 '16 at 9:49
  • 1
    Hi @SaurabhMishra, Locker service is relatively new. The libraries that are there before were definitely not written with LS in mind, neither is it strict mode compatible. The SLDS-scroll does not work. So, I'm forced to use external scroll plugin. And, it's Salesforce who has to fix the scroll functionality. There's little we can do to fix their bug in the scrolling functionality in SF1 app as they use transform. Also, if you have any suggestions regarding any other library available, please do suggest, and I do not plan to write my own library, atleast as of now. Thank you. :) – SE_User Dec 26 '16 at 4:28

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.