React-select: Option to blur input box on change

[glortho]

Great lib, thx. However I want our single-select box to blur when an option is selected rather than remain focused with cursor in the input. To accomplish this right now it seems I not only have to ...querySelector('.Select-input input').blur() in the onChange handler but I have to put it in a timeout. Is there an easier way to accomplish this and/or get it as an option?

[loganfuller]

+1

This would be very useful.

[mdressman]

+1

[seansfkelley]

I wrote 0bfba9919a3cb49ecffa4add74e4756b52805854 for myself to fix this problem, but it's not configurable nor thoroughly tested. I don't like the copy-paste but it seems to work fine in all cases (multi-select included). I can issue a PR if @JedWatson thinks it's fine.

[dcousens]

@jedverity use a ref?

Then you would just do ref.value.blur() AFAIK.

See here for more information on ref.

[glortho]

@dcousens The reason for querySelector is that putting a ref on <Select /> just returns the div.Select wrapper, when in fact the <input> that needs blurring is nested a few generations below.

So I can fork the lib and put a ref on that input and then do React.findDOMNode( myInputRef ).blur() but if I'm forking the lib (which I've done), I'm just changing the behavior to my specs, having it blur by default.

Let me know if I misunderstood your suggestion!

[jorrit]

Why was this issue closed?

In the docs I read that there is a focus() method on the react-select element, wouldn't a complementary blur() be in order?

[bulby97]

+1

[tomaszlukasik]

@glortho It was a long time ago, but it might be helpful for others.
Looks like input is rendered with ref="input",=, If you have your Select with ref="select", you can call this.refs.select.refs.input.blur().

[swiharta]

The setting autoBlur helped in my case.

[moneydance]

Ability to call blur would be nice.

[Vandell63]

Hey there! maybe it can help for material-ui 1.. user but can work for others too.
I use an Input and add the React-Select component in inputComponent of Input props.
Then add your ref to your select.
You can now access it with :
this.refs.select.input.input.blur() ( twice input here, cause the first one ref the AutosizeInput and the second one is the input Element)
Hope it help someone.

[lukfol]

My workaround:
<input style={{width:"0px",border:"none",padding:"0"}} ref={r=>this.dummyInput=r}/>
then in Select element:
onChange={ev=>{setTimeout(()=>{ if(this.dummyInput) this.dummyInput.focus(); },200);}}
timeout is needed

[Alacho2]

Coming back to this now because it's still relevant. How do you propose solving this, @JedWatson ?

EDIT: The standard .blur(), .focus() and so forth can found under this.refs.yournamehere.select.

[Jaraujo6]

I think this issue should be re-opened as well. I am currently rendering a React-Select component in a Formik form, and was running into issues because there wasn't an obvious way to run the React-Select onBlur after onChange.

To be more specific, the form has a validation that says the input field is a required field. To ensure this, my onBlur handler sets the Formik field to touched which triggers the validation handler to run and surface the error:

<Select
  ...
  onBlur={() => setFieldTouched()}
/>

When I do select an option I am setting the Formik field manually in the Select onChange:

<Select
  ...
  onChange={({ value }: { value: string; label: string }) => setFieldValue(value)}
/>

Lastly, I also have a design requirement that the dropdown loses focus on selection, which is easily handled with the blurInputOnSelect flag.

My issue is that enabling the blurInputOnSelect forces the onBlur handler to run before the onChange handler, so the validation error was surfacing even though the field was valid.
After much trial and error, the only solution I could think of was to use setTimeout to force the Formik handler to get added to behind the onChange handler in the event queue.

<Select
  ...
  onChange={({ value }: { value: string; label: string }) => setFieldValue(value)}
  onBlur={() => {
       setTimeout(() => setFieldTouched(), 1);
   }}
  blurInputOnSelect
/>

This solution is not ideal as it is best practice to avoid async functions in react outside of hooks. Is it possible to introduce a blurOnChange flag or modify the blurOnInputSelect flag to mimic this behavior? Is there a reason the onBlur _has_ to occur before onChange?

@JedWatson if you have a moment I would greatly appreciate your insight on this matter.