Knockout.js select list acting erratically on ios

Question

I have a few select boxes that are acting erratically in ios. I'm running cordova 1.8.1 and have a knockout.js application running on my page. When I select an item in the item picker, it gets selected but so do all the other items on the list. Now, as far as I can tell the proper item is being selected and reported when I submit the form, but it looks really really bad to the user and could be very confusing. I'm doing anything fancy, here is the code:

<select class="dropdownList1" style='width:35%;left:28%;position:absolute;' data-bind="value:ContactUsForm.Month,options:ContactUsForm.Months,optionsCaption: 'Month'"></select>

But here is the result when I pick 7 for the month:

This is NOT a muti select box. It seems to me that the error here is in iOS, but my suspicion is that Knockout is also doing some re rendering when I select a value. In normal browsers the box snaps shut so you never see an 'intermediate' state, but with ios, the box stays open until you click 'done'.

Answer 1

This problem is caused when Knockout updates the items in the drop-down. But even if ContactUsForm.Months never changes, Knockout still updates the items whenever the value changes, such as when you select an item. See RP Niemeyer's article Knockout.js Performance Gotcha #3 - All Bindings Fire Together for more details on this problem.

I think a solution he presents there will work for you. Instead of using the options binding, you should use his isolatedOptions binding. (Also the value binding should always be after options or isolatedOptions.)

<select data-bind="
    isolatedOptions:ContactUsForm.Months, optionsCaption:'Month', 
    value:ContactUsForm.Month"></select>