React-autosuggest: Allow input blur when using keyboard for suggestion or term

[JamieDixon]

Hi, first I just want to say thanks for creating and maintaining react-autosuggest. I appreciate all the effort that goes into maintaining an OSS project, 👍

We have a prop focusInputOnSuggestionClick that determines whether the input receives focus when a suggestion is clicked. I am however finding it difficult to blur the input when the user hits ENTER on a suggestion or when wrapping the Autosuggest component in a <form> and handling the onSubmit event.

Is there already a recommended way of doing this or is this issue a feature request?

Thanks for any pointers and thanks again for your time and effort on this project.

[moroshko]

Interesting. This is the first time someone asks to blur on Enter. Could you explain the rationale behind this? If you could create a Codepen that demonstrates the issue, that would be great.

[JamieDixon]

The use case is that a user types a search query into a suggest-enabled box and hits enter (or keys down to an item and hits enter). The search is then loaded (this is a single-page-app) and because the search input still has focus, the suggestions show up.

We'd like to blur the input and stop the suggestions showing at that point because they offer little value to a customer who's already seeing search results. Perhaps this is a niche case? I could create a fork and implement this and PR if you're interested in the feature.

[moroshko]

@JamieDixon Which version of react-autosuggest are you using? When you hit Enter, suggestions should be hidden like in this Codepen. Could you create a Codepen that demonstrates the issue?

[JamieDixon]

Hi @moroshko Apologies for the delay in replying. I got married on Sunday so things have been quite busy!

The issue I'm having is when the autocomplete is wrapped in a form and we preventDefault on submit. At this point we load our search results (single-page-app) and we need the suggestions to disappear.

Here's an amended version of the pen to illustrate the issue: http://codepen.io/JamieDixon/pen/XdGrZa

Cheers!

[moroshko]

@JamieDixon Congrats man!!

I just checked your pen and I see that the suggestions are hidden when you hit Enter. I thought that the issue is that they stay open. What am I missing?

[JamieDixon]

Hey @moroshko Thanks for the congratulations.

In my pen, the suggestions are only hidden if you choose one of the suggested items but not when you just hit enter from the input itself. Perhaps you're seeing different behavior? I'm using Chrome 50.0.2661.94 m.

[moroshko]

@JamieDixon Oh, I see!

What you can do, is to grab the input element and blur it yourself when the form is submitted. Example

[JamieDixon]

Thanks @moroshko We also came up with another solution because we're using redux that allowed us to utilise the searchSuggestionsVisible. Additionally, someone on our team is planning to send a PR to contribute back to this project that will allow this functionality. I expect it'll be sent today or tomorrow. Thanks for all your time helping on this. Very much appreciated.

[ganarajpr]

Hi, Thank you for merging this PR so fast..
And @JamieDixon awesome work on this 👍 .
@moroshko Could you cut a release for this please ? :)

[moroshko]

@ganarajpr Enjoy!