How to remove focus once selected

[AndreaBarghigiani]

Probably this is a silly question but the default behavior of this amazing component is to keep the focus on the input once the user has done a selection the focus is kept to the input. I believe that this comes handy for many use cases but I would like to ignore accidental keypress that my user could make once selected.

My understanding of the documentation about focus and blur methods is that I could call them inside the component, so on the onChange prop I've done something like the following:

onChange={ ( item ) => {
	this.setState( {
		// updating state
	} );
	blur();
} }

But this does not solve the problem because if I press some key on the keyboard the input shows that the focus is still there.

I am sure that there is something wrong with my code but I can not understand where I should handle this.
Thanks in advance for the future help.

[ebonow]

Greetings @AndreaBarghigiani ,

Have you tried the blurInputOnSelect prop as it sounds like what you are looking for?

If you wanted to use the blur method programmatically instead, you would want to use a react ref like so:

selectRef = react.createRef();

onChange= option => {
  this.setState({});
  selectRef.current.blur();
}

render () {
  return <Select ref={this.selectRef} onChange={this.onChange} />
}

[AndreaBarghigiani]

Thanks @ebonow it works like a charm, I know you're pretty busy keeping organized this project so I am really thankful for your answer 👍

[ebonow]

Thank you and I appreciate it. Doing my best to work through the noise to help surface the existing issues from the questions.

I know what it's like to get deeply invested into a project only to have it break with no recourse other than a complete retooling or to get 85% into solving something but getting stuck trying to figure out the last 25% 😉. I really love how flexible this project is and having a community that understands it and supports it will just result in better implementations for us to be inspired by.

[AndreaBarghigiani]

A little side note here I've just "discovered" that there was an option to do exactly that without the need of creating the ref in the first place: blurInputOnSelect is working without any hassle.

Since you've asked about gotcha's and pain point in #4312 here's are my two cents: IMHO whould be nice to have also an blurInputOnClose. I am proposing this prop because I've noticed that if user press ESC to close the menu the focus is still at the input component, and is in line with the logic of blurInputOnSelect because user didn't make any selection.

Based on your advice I ended up creating something like the following:

selectRef = React.createRef();

removeBlur = () => selectRef.current.blur();

onChange = option => {
	this.setState({});
}

render() {
	return (
		<Select
			ref={ this.selectRef }
			onChange={ this.onChange }
			onMenuClose={ this.removeBlur } // Works for selection or close
		/>
	)
}

Instead with this option available we could just remove the need to create ref and the removeBlur function:

onChange = option => {
	this.setState({});
}

render() {
	return (
		<Select
			onChange={ this.onChange }
			blurInputOnClose={ true }
		/>
	)
}

I totally agree that it is just syntactic sugar and we will not save that much typing but I am proposing it because it seems to me that will be in line with the already applied logic for blurInputOnSelect.