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 Answers 2

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?

3
  • Thank you for the response @Doug. My instance is CS89. When is the patch planed on this instance ?
    – Julien
    Oct 28, 2016 at 8:37
  • The version of the CS89 instance is Winter '17 Patch 11.3
    – Julien
    Oct 28, 2016 at 8:45
  • when is the patch planed on this instance ? Thank you
    – Julien
    Nov 2, 2016 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" />
5
  • 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, 2016 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, 2016 at 13:10
  • Did you try <aura:attribute name="multipicklistValue" type="List<String>" /> and component.get('v.picklistValue') ?
    – Patlatus
    Oct 27, 2016 at 13:15
  • I will try and come back to you. Thank you for the quick answer
    – Julien
    Oct 27, 2016 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. Oct 27, 2016 at 22:47

You must log in to answer this question.

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