Knockout Select binding changes selected value to the wrong selection

Question

I found a strange behavior with KO and select binding. With the bindings below, when I select either "testa" or "testb", KO changes my selection, causing the wrong value to be selected. The issues specifically appears when binding on Text values. If I change the binding to Numbers, KO works as expected. I suspect it is a bug with KO, but wanted to post here first to see if anybody could determine if I've done something wrong.

Here is a link to a JSFiddle page with the code below. I tried with all versions of KO and the problem appears in all of them: http://jsfiddle.net/ericeschenbach/C5X2U/ Also, I tested the issue in the latest versions of FireFox and Chrome, so I don't think its a crazy interaction with the browser.

HTML:

Fails:
<select name="a" data-bind="value: ValueText, options: AvailableText, selectedOptions: ValueText, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'All'"></select>
<br/>
Works:
<select name="b" data-bind="value: ValueNum, options: AvailableNum, selectedOptions: ValueNum, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'All'"></select>
<br/>

JS:

var self = {};
var availableText = [
    { "Text": "hospital north", "Value": "4" }, 
    { "Text": "hospital south", "Value": "5" }, 
    { "Text": "hospitalEast", "Value": "1" }, 
    { "Text": "johns place", "Value": "6" }, 
    { "Text": "juli", "Value": "8" }, 
    { "Text": "Piedmont", "Value": "2" }, 
    { "Text": "quinn2", "Value": "9" }, 
    { "Text": "test", "Value": "3" }, 
    { "Text": "testa", "Value": "10" }, 
    { "Text": "testb", "Value": "18" }, 
    { "Text": "tim", "Value": "7" }
];
var availableNum = [
    { "Text": "hospital north", "Value": 4 }, 
    { "Text": "hospital south", "Value": 5 }, 
    { "Text": "hospitalEast", "Value": 1 }, 
    { "Text": "johns place", "Value": 6 }, 
    { "Text": "juli", "Value": 8 }, 
    { "Text": "Piedmont", "Value": 2 }, 
    { "Text": "quinn2", "Value": 9 }, 
    { "Text": "test", "Value": 3 }, 
    { "Text": "testa", "Value": 10 }, 
    { "Text": "testb", "Value": 18 }, 
    { "Text": "tim", "Value": 7 }
];

self.ValueText = ko.observable();    
self.ValueNum = ko.observable();    
self.AvailableText = ko.observableArray(availableText);
self.AvailableNum = ko.observableArray(availableNum);
ko.applyBindings(self);

Answer 1

Looks like you shouldn't use selectedOptions: ValueText

From documentation

For a multi-select list, you can read and write the selection state using selectedOptions. Technically this is a separate binding, so it has its own documentation.

Here's updated example

Answer 2

Looks like this is a bug in knockout's select binding when dealing with text values. Here's a solution that can work for you in the meantime.

Replace your select binding with this

<select name="a" data-bind="value: ValueText, options: AvailableText, selectedOptions: ValueText, optionsText: 'Text', optionsValue: function(item){ return Number(item.Value); }, optionsCaption: 'All'"></select>

Where

optionsValue: function(item){ return Number(item.Value); }

is the magic that fixes knockout.