2

I used the select2 jquery Library in order to have better look and feel on select element on my lightning component.
It worked fine but when I activated the locker service this feature didn't work anymore. Indeed, the .select2() applied on the select returns the following error :

Uncaught TypeError: Failed to construct 'MutationObserver': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Below the code sample of the component :

<select id="picklistSelectBox" aura:id="auraPicklistSelectBox" class="slds-select" multiple="{!v.multiselect}" disabled="{!v.disabled}">
       <aura:iteration items="{!v.values}" var="val">
              <option value="{!val.value}">{!val.label}</option> 
       </aura:iteration> 
</select> 

Below the code sample of the renderer (I tried the same code in the helper) :

afterRender: function(component, helper) {
    this.superAfterRender();
    var picklistSelectBox = $('#picklistSelectBox');

    $(picklistSelectBox).select2({
        language: $A.get("$Locale.language")
    });

}

The error is raised at $(picklistSelectBox).select2({...});

I know with the LS activated, the access of DOM that I do not own is forbidden. But here, there is no namespace for the HTML select tag.

How can I use the select2 library ?

For the moment, 4000 users (and many others in the community we developed) are using the lightning component I developed, and it is not possible to change the behavior of the select element.

Many thanks for the help !

Regards

Julien

4

Interesting - MutationObserver is one of the only remaining parts of the BOM that we have not added support for in the very large set of fixes that deployed last night to all instances.

MutationObserver has typically been used as a DOM scraping attack vector but this looks like a legitimate use case - one which we can support by adding SecureMutationObserver.

Would you please let us know the version of jQuery and select2 (4.0.3?) you are using?

Do you already have a Salesforce support case open on this?

I am digging into this a bit more. Verified that SecureWindow.MutationObserver is correctly === undefined so Select2 should be falling back to the fully supported event based approach.

Logged bug W-3437769 if you want to reference this in communications with support.

  • @Julien found the issue - SecureWindow is incorrectly exposing WebKitMutationObserver and Select2 is then attempting to use it. The fix on my end is trivial but the process to get it out to production is a bit slow (days). I am testing the fix out against Select2 now to insure that when this rolls out the rest works well. – Doug Chasman Oct 28 '16 at 11:46
  • I pushed the fix to Winter'17 patch branch - now we start the clock on how long it takes to make it out to you. – Doug Chasman Oct 28 '16 at 12:13
  • Thank you for the quick response Doug ! Do I need to create a ticket to support ? When do you think the fix will be push on prod ? – Julien Oct 28 '16 at 12:38
  • The version of jQuery is 2.2.4 as i saw in another post that this version of jQuery is supported. The version of select2 is 4.0.3 – Julien Oct 28 '16 at 12:40
  • 1
    Finally - the fix is in for Winter'17 .12 patch that is scheduled to deploy Tuesday. – Doug Chasman Oct 29 '16 at 16:10

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.