Angular UI Typeahead - Manually clear/hide dropdown

Question

My use case is rather simple. I'm using the typeahead directive as a search box and want to manually clear/hide its dropdown when hitting enter (and you haven't selected anything) - much like Google does it.

P.S. the text in my search box needs to remain intact when clearing the dropdown

Answer 1

You have to wrap the typeahead element in a form. If you do that the typeahead will submit the form. If you add an ng-submit directive you can put your desired behaviour in there.

<form ng-submit="search(query)">
  <input type="text" ng-model="query"
     typeahead="foo as foo for foo in bars"
     typeahead-on-select="onSelect($item)"
     typeahead-focus-first="false"
     />
</form> 

Tested with version 0.12.0 of angular-bootstrap. See the comments in a related issue: https://github.com/angular-ui/bootstrap/pull/2916:

the expected behavior is that the outer form is submitted when hitting enter from the input and nothing is focused