Does the AngularUI typeahead plugin allow any typed value?

Question

I have an <input> that uses Bootstrap typeahead with Angular UI directive. The display and selection of values in the drop down works fine.

However when I type a value into the input that is not one of the drop down options then this value does not get bound to the model property. Yet what I type remains in the input as if it were valid input.

In the example below, when I type text into the input that is not an option in the autocomplete.referrers array then this text does not get bound to registration.referrer.

Have I configured the input correctly?

<input type="text" 
    name="referrer" 
    ng-model="registration.referrer"
    autocomplete="off"
    typeahead="referrer for referrer in autocomplete.referrers | filter:$viewValue"
    />

Perhaps the restriction on random text input is by design?

Many thanks if you can answer this.

Answer 1

@reggoodwin this is by-design in the current version of the typeahead directive: https://github.com/angular-ui/bootstrap/blob/929a46faa3a3eea3dec7ae8c1387f332eee9a9bc/src/typeahead/typeahead.js#L110

The rationale behind this behavior is that values from autocomplete should act as reference values. But I was pondering this behavior a bit, it could be made configurable. Feel free to open an issue in https://github.com/angular-ui/bootstrap to discuss more.

Answer 2

Adding this directive as an attribute worked for me:

<input typeahead-editable="false" >