undefined <select> value

[aeosynth]

http://jsbin.com/comumolu/1/edit

when two-way binding a element's value property, the bound value is undefined until another option is selected

[silenceisgolden]

Running into this issue as well. In some cases I've been able to put a default element to hint that something else needs to be selected, but for one use case I have right now I cannot do that. I've seen https://github.com/ebidel/polymer-experiments for a polymer version of the select element, but I'm having a hard time justifying this solution since it is so far from native.

[silenceisgolden]

An extremely hacky way around this is to put this code in the ready callback on your element that wraps the select element, assuming you are using a model to data bind to the value attributes on the select element and the select element has an id:

setTimeout(function() {
  this.model.bindValue = this.$.id.value;
}.bind(this), 1);

I was trying to use the domReady callback which should eliminate the need for the setTimeout (I think), but my specific code is not calling the domReady callback (probably a separate issue). The goal here is to get the value back to the model so it can be used properly. This is only needed once because the model is updated correctly on value changes. Again, hacky fix; there is probably a better workaround.

[arthurevans]

For the first item, you just need to set a default value for the property, as described here:

https://polymerdocs.googleplex.com/docs/polymer/polymer.html#default-property-values

For example:

http://jsbin.com/cogig/2/edit

This may answer @silenceisgolden as well. I think the select-element in @ebidel's repo is an experiment, not intended to replace a native select.

If you want an element that's ready to use, you might want to look at core-menu-button, core-menu or core-selector:

http://www.polymer-project.org/components/core-docs/index.html#core-menu-button
http://www.polymer-project.org/components/core-docs/index.html#core-menu
http://www.polymer-project.org/components/core-docs/index.html#core-selector

None of these is a drop-in replacement for select, however. Take a look at the demo pages (click the "Home page" link on the docs, then look for the blue "Demo" button) to see some of the possible uses.

[silenceisgolden]

@arthurevans Thanks for the input, but the problem is a bit more complex. I can't guarantee to my code that I know what the first default item's value should be. Hence the bringing back the value into the model after Polymer finds it. The problem is that this doesn't happen by default, i.e. Polymer grabbing the first value of the options list inside the select element and assigning the value of the first option to the model.

[aeosynth]

i solved this by setting a default value, as @arthurevans says. feel free to close this issue, although it would be convenient if polymer picked up default values from html, as well as from js

[sorvell]

The behavior noted in the op's jsbin seems wrong to me. The select element's value property is out of sync with the bound model value.

@jmesserly wdyt and mind taking a look at how this might be addressed?

[sorvell]

Also related: #734