Polymer select not reflecting value attribute

Question

My select element has the value set to a key on the binding object, and that key is set correctly, because i have other values that reference it (those work), however the select box isn't showing my value correctly.

    <select value="{{key}}">                                                                                                                                                                                                                                
        <option value="">- Field -</option>                                                                                                                                                                                                                 
        <template repeat="{{field in fields}}">                                                                                                                                                                                                             
            <option value="{{field.key}}">{{field.key}}</option>                                                                                                                                                                                            
        </template>                                                                                                                                                                                                                                         
    </select>

Expands to:

 <select value="{{key}}">                                                                                                                                                                                                                                
        <option value="">- Field -</option>                                                                                                                                                                                                                 
        <option value="name">name</option>
        <option value="phone">phone</option>
        <option value="address">address</option>                                                                                                                                                                                                                                     
    </select>

If I console.log this.key in the ready function of my element I get 'name', further my second select in the element relies on this.key, and that select element's options are showing correctly.

Is there something special I need to do to have the select select the correct element from the key? I could do it in JS, but that seems overkill. Can you not set a select box using the value? Is it only a getter so-to-speak?

Answer 1

Ok, if you're setting the options in your select, in your ready function, then you can't set the value in the same function or before. You have to wait till after that function returns, or the selectbox won't have the options you need yet.

For now I'm using a 0ms timeout, although im sure their are better events to subscribe to instead.

Regardless if anyone else is having issues setting their select values for polymer elements, then keep in mind the options need to be set before you have have your set value be reflected in the UI and then you have to explicitly set it again.