typeahead close select on form submit

[ayeletdn]

I would like to get the select list to close when the form is submitted with a value which is not on the list (using typeahead-focus-first set to false).
I used the typeahead plunker example as a starting point.

When the user hits enter, the storeItem function fires, but the list does not close.

    <form ng-submit="storeItem()">
      <input type="text"
        typeahead="state for state in states | filter:$viewValue | limitTo:8" 
        typeahead-focus-first="false"/>
    </form>

The full function:

    $scope.storeItem = function() {
       $scope.selected = Date.now();
    };

See full plunker here

If this is not an issue, and you have an idea for a workaround, I'd appreciate if you could answer this SO question

[RobJacobs]

This issue is in the typeahead directive keydown method:

// if there's nothing selected (i.e. focusFirst) and enter is hit, don't do anything
if (scope.activeIdx == -1 && (evt.which === 13 || evt.which === 9)) {
  return;
}

Which will leave the popup open when the input element loses focus. To reproduce in the plunker mentioned above, in the first typeahead, type a then TAB.

[shootermv]

I curious if something like this can help
here

[Jacquelin]

Hello,

I have the same issue ... here is my plunker:
http://plnkr.co/edit/FrjocQVyRKt0prwJtIzh?p=preview

I made two sample :

• One with ng-submit (handle the ENTER key), it does not close typeahead
• Second with ui-keypress (no form, no ng-submit) AND typeahead-on-select.

The both samples are fine for me :
Case 1 : The user enter a "word" -> Press Enter -> it submit a search
Case 2 : The user enter a "word" -> select a suggestion -> it submit a search with the selected value.

But, for the two case, it doesn't close the typeahead

I try your solution, @shootermv, it works fine, but ... it's a bit quirky, no ?

[tenorius]

i have the same problem. After hitting enter with none of the sugestions selected the dropdown menu wont close.