Binding to a <select>

[matthewp]

I can't find any documentation on how to bind to a , or any form field where the value is element's value property. Can you point to an example of how to do this? If so I'd be happy to submit a documentation PR.

Raynos commented 9 years ago

Check out https://github.com/Raynos/mercury/blob/master/examples/shared-state.js for a simple form

matthewp commented 9 years ago

So it appears that it's not working for me because this line resolves to false. ev.type is change and target.type is select-one.

Selects are not valid inputs for change events? Then what is the correct way to use for selects?

Here's some pseudo-code:

h('select', {
  value: chosen
  'ev-change': hg.sendChange(state.channels.selected)
}

matthewp commented 9 years ago

Could this be a bug, https://github.com/Raynos/mercury/issues/48 ? If so could you give me some direction on how to fix and I'll submit a PR. Selects are pretty important to me.

jonnyscholes commented 9 years ago

Based on the comments from @matthewp I had a look at this (ran into the same issue this morning).

Checking if the root elm has a .name in form-data-set/element and adding to the hash along with adding select-one to the VALID_CHANGE array in value-event/change makes this work as expected. Another solution might be to include the root dom node in the dom-walk in the series - although I'm not sure if that is what is expected and may break other functionality.

If either of the above solutions sound acceptable I can send a PR - I have it working over here.

Raynos commented 9 years ago

@matthewp @jonnyscholes

Let's add select-one and select-multiple to the whitelist. Contribution welcome :)

neonstalwart commented 9 years ago

@matthewp make sure you also read through Matt-Esch/virtual-dom#115 since you're likely going to have issues trying to use select with the value attribute the way you've outlined in pseudo-code.

matthewp commented 9 years ago

Thanks. You don't really need to set the select's value though, right? As long as you set one of the option's selected attribute.

neonstalwart commented 9 years ago

@matthewp that's right - use the selected attribute of an option to set the value rather than the value of the select. this is because the value may get set by virtual-dom before the option children are added and the value won't take if there isn't an option to match it.

matthewp commented 9 years ago

Just updated and this is fixed now.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[Raynos]

Check out https://github.com/Raynos/mercury/blob/master/examples/shared-state.js for a simple form

[matthewp]

So it appears that it's not working for me because this line resolves to false. ev.type is change and target.type is select-one.

Selects are not valid inputs for change events? Then what is the correct way to use for selects?

Here's some pseudo-code:

h('select', {
  value: chosen
  'ev-change': hg.sendChange(state.channels.selected)
}

[matthewp]

Could this be a bug, https://github.com/Raynos/mercury/issues/48 ? If so could you give me some direction on how to fix and I'll submit a PR. Selects are pretty important to me.

[jonnyscholes]

Based on the comments from @matthewp I had a look at this (ran into the same issue this morning).

Checking if the root elm has a .name in form-data-set/element and adding to the hash along with adding select-one to the VALID_CHANGE array in value-event/change makes this work as expected. Another solution might be to include the root dom node in the dom-walk in the series - although I'm not sure if that is what is expected and may break other functionality.

If either of the above solutions sound acceptable I can send a PR - I have it working over here.

[Raynos]

@matthewp @jonnyscholes

Let's add select-one and select-multiple to the whitelist. Contribution welcome :)

[neonstalwart]

@matthewp make sure you also read through Matt-Esch/virtual-dom#115 since you're likely going to have issues trying to use select with the value attribute the way you've outlined in pseudo-code.

[matthewp]

Thanks. You don't really need to set the select's value though, right? As long as you set one of the option's selected attribute.

[neonstalwart]

@matthewp that's right - use the selected attribute of an option to set the value rather than the value of the select. this is because the value may get set by virtual-dom before the option children are added and the value won't take if there isn't an option to match it.

[matthewp]

Just updated and this is fixed now.