Option to blur input box on change

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?

[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.

[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.