Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click outside must close suggestions. #241

Open
divined opened this issue Oct 13, 2017 · 3 comments
Open

Click outside must close suggestions. #241

divined opened this issue Oct 13, 2017 · 3 comments

Comments

@divined
Copy link

divined commented Oct 13, 2017

Click outside must close suggestions.

How to?

@divined
Copy link
Author

divined commented Oct 19, 2017

After any page updates suggestions are opens again (((

Why not focused element show suggestions? Please add rules to showResults:

  1. entryValue in_array searchResults and searchResults.length == 1 > hide
  2. isFocused == false > hide

@faultables
Copy link

On my project I use this concept:

  • create isSuggestionOpen state, and set it to false by default
  • while user focus on input, set that state to true (via onFocus props)
  • if user click outside input, set that state to false (via onBlur props)
  • in customClasses.results props, I add this class (just for example): Typeahead__container Typeahead__container--${this.state.isSuggestionOpen ? 'isOpen' : 'isHide'} and control it via visibility, opacity, or display. It's your option.
  • it works for me. May help you :)

@abdallahokasha
Copy link

abdallahokasha commented Apr 25, 2018

simiply, we can set showResults to false on _onBlur Function

this.setState({isFocused: false, showResults: false}, function () {

instead of just,

this.setState({isFocused: false }, function () {

it works with me 😄

abdallahokasha added a commit to abdallahokasha/react-typeahead that referenced this issue Apr 25, 2018
Edit _onBlur function setting showResults to False to hide Options Menu

Issue fmoo#241
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants