Selectmenu selection does not change observable value

[bernesto]

When changing the value of a selectmenu, the underlying observable does not change. If listening to the the "change" event on the selectmenu, and triggering a "change" event on the underlying select element, it does then work.

[gvas]

@bernesto: the underlying observable you mentioned is an observable bound to knockout's value binding, isn't it?

<select data-bind="selectmenu: {}, value: valueObservable">...</select>

[bernesto]

Yes. Something similar to this:

<select data-bind="selectmenu: myOptions, value:  myValue">...</select>

<script>
var myModel = {
    myOptions : ko.observableArray(['Opt 1', 'Opt 2']),
    myValue : ko.observable('')
}
ko.applyBindings(myModel);
</script>

Also, I couldn't get it working with an array of objects bound to the label either.

It renders fine, it just will not perform two-way binding in either case for the myValue property. I can put together a more detailed example if needed.

[gvas]

No need for a more detailed example, thanks. The jQuery UI selectmenu widget uses a custom event (selectmenuchange) to indicate that the select's value changed. Knockout's value binding listens to the standard change event, so it can't update the bound observable. The solution will be to modify my selectmenu binding to trigger change in the selectmenuchange's handler, basically it should act as a bridge between the two events. Actually I have already implemented this in the developer branch, I am going to merge it into master and make a new release.

[bernesto]

Awesome. That is what I was thinking too. Glad to see you are on top of it.

Seems like this might be the case in some of the other jQuery UI controls that have non-standard events plus properties that could be bound to observables. (e.g. spinner, tabs, menu, accordion) I have not used them yet in this project, but they have similar usage scenarios. What do you think?

[gvas]

Oops, it was closed accidentally.

[gvas]

Fixed in v2.2.0.