Cannot access to HTML select with locker Service activated

Question

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

Answer 1

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?

Answer 2

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" />