The issue is that both <kbd>Enter</kbd> and <kbd>Tab</kbd> confirm the selection of the currently highlighted item and Typeahead *automatically* selects an item as soon as you start to type.  

If you want, you can click off the control to lose focus or hit <kbd>Esc</kbd> to exit out of typeahead, but those might be difficult to communicate to your users.

There's an open request in Bootstrap Ui to [not auto select / highlight the first item][#908]

One solution is to [populate the first item with the contents of the query thus far][fix], so tabbing or entering will only confirm selection of the current query:

**JavaScript**:



    angular.module('plunker', ['ui.bootstrap'])
        .filter('concat', function() {
            return function(input, viewValue) {
            if (input && input.length) {
                if (input.indexOf(viewValue) === -1) {
                    input.unshift(viewValue);
                }
                return input;
             } else {
                return [];
        }};})

**HTML**: 



    <input type="text" 
         ng-model="selected" 
         typeahead="state for state in states | filter:$viewValue | limitTo:8 | concat:$viewValue"
         class="form-control">

### [Demo in Plunker][plunker]

[#908]: https://github.com/angular-ui/bootstrap/issues/908

[fix]: https://github.com/angular-ui/bootstrap/issues/908#issuecomment-45199474
[plunker]: http://plnkr.co/edit/ocfun0qREIohq8xtx9iN?p=preview

I'm working on an app using AngularJS and Bootstrap UI. I've been fumbling my way through using the Typeahead control in Bootstrap UI.

[**Here's my Plunker**][1]

My challenge is I want the user to have the option of choosing an item, but not required to do so. For instance, right now, if you type `Test` in the text field and press "Enter", `Test` will be replaced with `Alpha`. However, I really want to use `Test`. The only time I want the text to be replaced is when someone chooses the item from the drop down list. My markup looks like the following:

    <input type="text" class="form-control" placeholder="Search..."
           ng-model="query"  
           typeahead="result as result.name for result in getResults($viewValue)"
           typeahead-template-url="result.html" />


How do I give the user the option of choosing an item, but allow them to still enter their own text?


  [1]: http://plnkr.co/edit/wkXpPMwcCq5ytLRO0ILN?p=preview