Allow blur() on component

[felixhammerl]

As a developer, I want to call blur() on the component so that I can close the suggestions and remove focus from the input.

There has been a workaround in https://github.com/moroshko/react-autosuggest/issues/158 but this breaks encapsulation as it makes a parent component reach into a child component. Being able to blur() the component would solve this nicely.

[moroshko]

Could you describe your use case? Why would you want to blur programatically?

[felixhammerl]

I am a user on a mobile device. When I am done writing into the corrections field (which I did by tapping the bottom-right return/submit button), I want to remove focus from the input field so that the keyboard disappears and I have my screen real estate back.

Does that make sense?

[moroshko]

which I did by tapping the bottom-right return/submit button

Is this button part of the keyboard? Isn't the input loses focus when you tap this button? Maybe you could attach a screenshot to clarify?

If you would like to blur the input when suggestion is tapped, you can set focusInputOnSuggestionClick={false}.

[felixhammerl]

Yes, the button is part of the keyboard.

Here's what I'm able to do:

<form className='...' onSubmit={this.onSubmit}>
  <Autosuggest
    ref={autosuggest => {
      if (autosuggest !== null) {
        this.input = autosuggest.input
      }
    }}
    name='...'
    focusInputOnSuggestionClick={false}
    theme={suggestionsTheme}
    suggestions={suggestions}
    onSuggestionSelected={this.onSuggestionSelected}
    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
    getSuggestionValue={i => i}
    renderSuggestion={getSuggestionComponent}
    inputProps={inputProps} />
</form>

The handlers are doing the following:

  onSuggestionsClearRequested () {
    this.setState({ suggestions: [] })
  },

  onSuggestionSelected (e, {suggestion}) {
    ...
    this.onSuggestionsClearRequested()
  },

  onSubmit (event) {
    event.preventDefault()
    this.input.blur()
  },

The user is starting to write a name that's not part of the suggestions list. When they're done, they hit the "submit" button (or enter, if you're on a desktop). At that point, I'd like to blur the input field, which I can do from the form handler. Except that my current solution completely breaks encapsulation.

[gl0gl0]

I also need this functionality. For example:

I added a custom button to the autosuggest container for "Showing all results" that navigates to the search results page. But when clicking this button, the suggestions dropdown stays open. And I would like to hide it.

[kumar303]

I'm trying to implement the exact same thing as described by @gl0gl0 ^

[oneinchman]

Any news on this one? I have also created a custom link inside the suggestions container. But because it is not a standard suggestion, the dropdown stays open when i click it. Please advice

[dylanfpaul]

Any news on this one? I have also created a custom link inside the suggestions container. But because it is not a standard suggestion, the dropdown stays open when i click it. Please advice

One workaround I found that works is to disable the search input and then re-enable it. You would want to do this as an onClick on one of your custom components:

document.getElementById('searchInput').disabled = true
document.getElementById('searchInput').disabled = false

Update: There is still a problem in safari (iOS) where the iOS keyboard will not go away even if you hit the "done" button on the keyboard.

[dylanfpaul]

@moroshko I think you should definitely allow users to blur programmatically as its such a significant characteristic of the component's state. Should definitely be available in a developer's toolbox when implementing this library.

[Kestutis]

While we waiting for blur, I decided to control it through ref.

construct(props) {
    super(props)
    this.autosuggest = React.createRef();
}
render() {
    // ....
    <Autosuggest
        ref={this.autosuggest}
        // .......
    />
}

// ... 
readAllButtonClickHandler = () => {
    // I'm calling onSuggestionClearRequeted and clearing my suggestions there so I can reset suggestions to [] and by that close results screen. 
    this.autosuggest.current.onSuggestionsClearRequested();
    // ... 
}

[LuisSaybe]

still no updates ?

[anmol5varma]

Can we pass the property disabled in inputProps with true or false value?

[aberezkin]

You can now pass your own ref to the underlying input using inputProps and call blur on it. Does it serve your use case?

[mdodge-ecgrow]

You can now pass your own ref to the underlying input using inputProps and call blur on it. Does it serve your use case?

Can you show an example of how to do this? I am having an issue where I need to hide the suggestion container on blur and it's just stuck showing there.

[d4ydr34mzzz]

Can you show an example of how to do this?

I've included an example of what @aberezkin mentioned below; I found this ref documentation useful: https://reactjs.org/docs/refs-and-the-dom.html.

...

class Autocomplete extends Component {
    constructor(props) {
      
      ...

      this.textInput = React.createRef();
      
      ...
      
    }
  
    ...
  
    onSuggestionSelected(event, { suggestion }) {
      this.props.history.push(`/profile/${suggestion.handle}`);
      this.textInput.current.blur();
    }
  
    render() {
      const { hits } = this.props;
      const { value } = this.state;
  
      const inputProps = {
        value,
        onChange: this.onChange,
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        placeholder: "Search",
        ref: this.textInput,
      };
  
      return (
        <AutoSuggest
          suggestions={hits}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={this.getSuggestionValue}
          renderSuggestion={this.renderSuggestion}
          inputProps={inputProps}
          onSuggestionSelected={this.onSuggestionSelected}
          shouldRenderSuggestions={this.shouldRenderSuggestions}
          focusInputOnSuggestionClick={false}
        />
      );
    }
}

export default connectAutoComplete(withRouter(Autocomplete));