search

oferh / ng2-completer

Angular 2 autocomplete component
http://oferh.github.io/ng2-completer/
MIT License
347 stars 172 forks source link

Autocomplete dialog closes after pressing Enter #417

Open landworth opened 5 years ago

landworth commented 5 years ago

If the user enters some search text and immediately pushes Enter, the autocomplete dialog closes prematurely.

This can be seen on the test page http://oferh.github.io/ng2-completer/#/native when working with "Custom data provider".

I've tried intercepting the click event and doing something with it, but not sure how to prevent the close happening in the first place.

pflopez commented 5 years ago

fwiw I think that is expected on an html input, basically submit on enter. You may try to intercept the enter on keydown as explained here https://stackoverflow.com/questions/7060750/detect-the-enter-key-in-a-text-input-field

landworth commented 5 years ago

@pflopez thanks for the advice! I managed to detect the enter button, but how would I intercept and stop it affecting ng2-completer after the keypress?

pflopez commented 5 years ago

@landworth event.preventDefault / event.stopPropagation ?

landworth commented 5 years ago

@pflopez thanks for your reply. This is exactly what I tried, however it doesn't seem to work properly.

When I bind to the keyup event in the HTML using (keyup)="checkForEnter($event)", I find the function 'checkForEnter' is triggered, but the enter button has already been handled by ng2-autocompleter, which makes the autocomplete dropdown disappear anyway.

This makes me think I would need to branch the ng2-autocompleter code and add the two event.* commands into the 'public onKeyup(event: any)' function in this file: https://github.com/oferh/ng2-completer/blob/master/src/components/completer-cmp.ts, before this.keyup.emit(event); is triggered.

Am I missing something obvious here?!

Thanks again