onSelect not firing in a specific instance when item is selected

[markstickley]

Thanks for your work on this project! Really handy, although I ran into this issue:

Repro steps:

1. Type a few letters and get some options
2. Press down on the keyboard to select something (not fired yet, that's fine as the user might want to go further down or up again before a final selection). Notice the text in the selection box changes as you move.
3. Use the mouse to click away from the choices.

Expected: selection remains in text box; onSelect fires
Actual: selection remains in text box; onSelect does NOT fire. But the text is still selected.

If the text box is only for display and you are working with data values underneath this behaviour can break the app.

Cheers!

[tkirda]

Hi, good point, yes I can confirm that it is not working as expected. However, expected should be: restore input to original value, because to select you need: click entry or hit enter.

[markstickley]

Fair enough I’ll take your advice on that one. When I was playing with it I expected it to remain as what I selected though!

Cheers :)

On 7 Sep 2015, at 18:41, Tomas Kirda notifications@github.com wrote:

Hi, good point, yes I can confirm that it is not working as expected. However, expected should be: restore input to original value, because to select you need: click entry or hit enter.

—
Reply to this email directly or view it on GitHub #408 (comment).

[tkirda]

Sounds good, updated version has been published to NPM.

[solepixel]

I'm pretty sure this commit is causing some unexpected behavior for me. Here's what happens:

1. Start typing in the autocomplete input
2. Use your mouse to click on one of the suggestions
3. Either click back into the input, or click on the body of the page
4. !! The previous selection is populated back into the input

Expected behavior:

1. Start typing in the autocomplete input
2. Use your mouse to click on one of the suggestions
3. Either click back into the input, or click on the body of the page
4. The input remains blank, ready for next autocomplete request.

Here's an animation of the what I'm seeing:
http://3cd.co/image/3V1c063V1g2s

The only reason the input clears is because in my onSelect callback, I'm setting my input value to blank. Here is my code:
https://gist.github.com/solepixel/79e36b20a062455d5875

The only solution I could come up with is to set the field focus again after selection and setup an event on blur and focus to check to see if there is a value in the field. If there is not, then I have a very quick 200ms Timeout function that clears the value, which will remove the inserted previous search query.

Any suggestions on workarounds for this?

[tkirda]

This is edge case, because you changing value in your callback. Adjusted to not restore value if suggestion list already hidden.