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

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?

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

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

JavaScript:

<!-- language: lang-js -->
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:

<!-- language: lang-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