Selecting type-ahead item with keyboard.enter fires both selectItem event and keyup.enter on input field

[stevewarsa]

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

I have an input field where the user needs to be able to enter an id to start a search. They press enter on the field to start the search. But I want them to be able to select from list of type-ahead entries as well. This works fine in the following cases:

1. No type-ahead entries available, and user types in the id and presses Enter key
2. Type-ahead entries exist and user selects one using mouse

However, in the case where type-ahead entries exist and user navigates to desired type-ahead entry and presses enter key, then both the 'selectItem' event and the 'keyup.enter' event get fired. This results in the search getting run twice, which is not a good (or efficient) thing. In my code (not the Plunker), I've put a boolean in called 'searchAlreadyInProgress' that will be set to true once the search starts, then false, once search completes. If that boolean is true when the search method is entered, I just return. However, this is not a good solution, because error handling may be done further upstream.

Rather, it seems that this type ahead directive ought to provide a way to stop the propagation of the 'keyup.enter' event if the 'selectItem' event is fired....

Please note, that in my plunker, I demonstrate the issue by just logging a message. When you select a type-ahead entry via the keyboard, you will see these two messages in the console:

onSelectItem: item selected = Alabama
keyup.enter: id=Alabama

Whereas, when you select a type-ahead item using the mouse, you will only see this console message:

onSelectItem: item selected = Alabama

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/Xp1SldfD27rshGZtWJMv?p=preview

You can fork a plunker from one of our demos and use it as a starting point.
Please note that we can not act on bug reports without a minimal reproduction scenario in plunker. Here is why:
https://github.com/ng-bootstrap/ng-bootstrap#you-think-youve-found-a-bug

Version of Angular, ng-bootstrap, and Bootstrap:

Angular:
2.1.0
ng-bootstrap:
1.0.0-alpha.9
Bootstrap:
4.0.0-alpha.4

[deeg]

@stevewarsa, this issue is very closely related to #877.

I have a PR out for that issue which will probably solve your issue as well. My approach was to allow the select event to be fired when not focused on an result from the autocomplete. This would allow you to remove the need for the keyup event.

[stevewarsa]

By reading your comment, it seemed like it wouldn't solve the problem, but in testing it, with alpha 11, the problem seems to have gone away... Thanks

[pkozlowski-opensource]

This is duplicate of #877

[pkozlowski-opensource]

Well, actually this is not an exact duplicate so I'm going to keep it open.