Select value and options data bound to attributes

[Pierce71588]

I am running into a problem when trying to data bind various elements and they rely on each other. I looked to see if there were similar issues but I didn't know exactly how to describe this problem I am having.

Here is a simplified jsbin that I created.
http://jsbin.com/sudezizu/1/edit?html,console,output

You will notice that I have a repeating template that is data bound to "testData.queries". Then the select box has a template to choose 1 of the "testData.queries". This functionality works properly and when you "add" queries, it adds it to the drop down.

However, you will notice that I am passing "testData" in as an attribute to the element. The queries populate properly, but the specific query you have selected is not selected in the drop down. If you run:

document.getElementById('test').testData.queryNum;

In the console you will see that the value is set correctly. And if you run:

document.getElementById('test').testData.queryNum = 2

you will notice it does update the drop down correctly now. So it is data bound.

My guess is that it is setting the value of the drop down before it is setting the queries variable. So the option doesn't exist when it sets the drop down value. However, my understanding is this is why the updates to the data bindings are asynchronous so you don't run into this problem.

Any suggestions? I would be willing to tell the system to update all data bindings but it doesn't appear that is possible and I don't know how to fake the system into thinking there is a change when there really isn't.

Thanks,
Daniel

[Pierce71588]

I did some additional research on this and narrowed the issue down as well as a workaround.

This happens when you have a combo box () where the "options" are data bound to an array attribute. And the value of the select is also data bound to an attribute. It appears that the system tries to databind the value, which the option doesn't exist yet so it sets it to blank, and then it data binds the repeat template for the options and creates the options. Work Around: If you are able to data bind "selectedIndex" on the select box instead of the "value" attribute it will work as expected. Ultimate Fix: Would it be possible any time a repeat template, inside of a select box, changes to trigger an update on the select box? Generally this is possible to work around because you make sure that you update the options before you update the value. To do this you can just update the value of the select as an async call. However, if it would be possible to make a change like suggested above then it would make it work as expected in both cases and make it possible in the attribute method. Thanks, Daniel

[sorvell]

@rafaelw or @jmesserly What would you recommend to synchronize the initial value and keep the selection in sync with the options?

Here's a slightly simplified version:

http://jsbin.com/sudezizu/7/edit

[jmesserly]

possibly related: #487

[tjsavage]

Closing this issue due to age and the release of version 1 of Polymer - please feel free to re-open if this is incorrect.