0

Since the locker service is activated, I cannot access to the HTML select tag.

I want to dynamically change the options in the select tag.

Below the code sample of the component:

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

Below the code sample of the helper:

var selectBox = $('#picklistSelectBox');
or
var selectBox = document.getElementById('picklistSelectBox');

This returns an empty object with no property, and I am not able to get/set values in the select with $('#picklistSelectBox').val(...) instruction.

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.

This worked fine when LS is not activated.

How can I do that with LS activated? Is there something that I'm missing ?

Many thanks for the help!

EDIT : Behind I use the select2.js jQuery library

Regards

Julien

2

The fix for <select> access and .value (and dozens of other fixes we've been working on fo rthe past 4+ months) is on its way out now as part of Winter'17 .11 (deployed to a number of instances already).

You own any DOM elements created by aura:html - that is the component that is really created when you type <div>, <select>, etc. That gets converted into:

any the underlying DOM element is automatically "yours" just as if you had written document.createElement("select") manually.

What instance is your org on @Julien?

  • Thank you for the response @Doug. My instance is CS89. When is the patch planed on this instance ? – Julien Oct 28 '16 at 8:37
  • The version of the CS89 instance is Winter '17 Patch 11.3 – Julien Oct 28 '16 at 8:45
  • when is the patch planed on this instance ? Thank you – Julien Nov 2 '16 at 8:56
0

There is a hack to access DOM elements even if locker security is enabled, but it is not recommended.

I agree Locker Service is evil and makes life of developer a disaster, however, Salesforce recommends not to access DOM elements but perform any manipulation using Lightning features.

Instead of accessing DOM elements you need to modify {v.values} in javascript controller.

If you need to read or write value to picklist, use attribute instead and read or write value to attribute using component.get and set methods.

Read select value:

component.get('v.picklistValue')

Write value to select:

component.set('v.picklistValue', 'someValue')

Definition:

<aura:attribute name="picklistValue" type="String" />
<ui:inputSelect value="{!v.picklistValue}" class="slds-select" />
  • Hi, @Patlatus, thank you for the response. The select I used is a multi-select (I can select multiple values). I that case, how can I get selected values ? – Julien Oct 27 '16 at 13:04
  • I saw that it is possible to use this sample of code : $.each(component.find('auraPicklistSelectBox').getElement().children, function(index, element){console.log(element.selected);}); but it is really a mess – Julien Oct 27 '16 at 13:10
  • Did you try <aura:attribute name="multipicklistValue" type="List<String>" /> and component.get('v.picklistValue') ? – Patlatus Oct 27 '16 at 13:15
  • I will try and come back to you. Thank you for the quick answer – Julien Oct 27 '16 at 13:49
  • 1
    @Patlatus "however, Salesforce recommends not to access DOM elements but perform any manipulation using Lightning features." is an incorrect interpretation - you are 100% encouraged to access your own DOM elements or any DOM elements any code you import into your locker creates on your behalf. The issue with <select>.value has been reported a number of times and is in the bucket of :"the secure virtual DOM is not correct". That is changing with the release going out as I write this. Will it be perfect - no - but we're getting there. This patch also improves the svDOM's perf more than 10X. – Doug Chasman Oct 27 '16 at 22:47

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.