Select control and input field bound to the same observable

[hroerdi...@gmail.com]

First of all, I know there have been one or two questions very similar to mine, but the solution posted there (using the if-binding) isn't viable for me. Hence the new discussion. Now for the actual problem:

A commonly used pattern in the forms in my application is one where a user selects a category for the entity they are creating. They can either pick a category from a select control, or define a new category by filling an input field as they please. In our old (non-knockout) setup, this worked fine. With knockout, there's a problem I can't seem to overcome: both controls are bound to the same observable, since that observable is committed to the backend when the form is submitted. So it sort of looks like this:

viewModel: {
    categories: ko.observableArray(['one', 'two', 'you know the rest']),
    selectedCategory: ko.observable('one')
}

HTML:
<input type="text" data-bind="value: selectedCategory" />
<select data-bind="options: categories, value: selectedCategory" />

The select control works fine: I get a default selection, and I can change it at will. This is propagated to the input field and committed properly. However, when valueUpdate occurs for the input field (when I try to define a new category), the select control tries to update it's selection, can't find the correct item, and it will revert back to selecting the first item in the array. This prevents me from being able to define a new category.

I know about the optionsCaption binding, and I guess I could use this to set the first item to a hardcoded value that I can just filter for by making a computed observable, but using a caption like that is not desired in these cases (long story, product managers...)

Currently I am at a loss on how to fix this. Does anyone see the light where I can't? Thanks in advance!

[rpn]

Is it okay for the new item to show up in the dropdown?  How about something like:  http://jsfiddle.net/rniemeyer/fSZWG/?  

[hroerdi...@gmail.com]

Yes, that will work fine I suppose, thank you! Am I correct that I can not get away with it NOT being in the list, as long as I want to use the same value binding in these two places? Just out of curiousity...

Op dinsdag 18 september 2012 16:04:23 UTC+2 schreef hroerdi...@gmail.com het volgende:

[Michael Best]

Since this is something I've seen come up quite a few times, I've added an issue in GitHub to add support for this to Knockout:  https://github.com/SteveSanderson/knockout/issues/647 

-- Michael

[Jeremy Rosenberg]

I second this.

In cases such as these where the range of valid values is constrained, knockout has to make a decision of what to do when a value falls outside of that range - either revert the model change, or ignore the change in the UI (or select nothing like Michael's suggestion).  Right now, it forces that decision to revert.  An option to control a decision like this is always preferable.

In my case, I'm trying to emulate an old non-knockout combo-box we have that uses a text input overlayed on a select.  It is expected that text may be entered that is not an option in the list, and I would simply like to ignore the change in the select when this happens since the dropdown text is not shown anyway.  I have this working, but it requires a large chunk of pretty grotesque code to workaround this - makes up 90% of the custom binding, has a dom data footprint, and I feel like it's going to bite me later.