explicitly call .blur() on select?

We’re using react-select as one of the many field types in a form, and our form component has the following simple logic to ensure that if any field is set to “Other”, a text field is revealed in which users can fill out their out-of-band choice/reason/etc.

  // autofocus on anything that needs autofocussing.
  componentDidUpdate: function(prevProps, prevState) {
    var afelement = this.refs.autofocus;

    if (afelement) {
      if (document.activeElement) {
        document.activeElement.blur();
      }
      ReactDOM.findDOMNode(afelement).focus();
    }
  },

This works perfectly, except when “Other” is chosen in react-select. In that case, React honours the focus() call in componentDidUpdate, and then react-select immediately steals focus back, which it should not be doing.

Is there a way to tell react-select to stop hogging the limelight?

[divmgl]

This is an old issue, but I’d like to see the addition of a blur option or the ability to NOT focus the select when selecting an item.

[Pomax]

I updated your code to reflect the situation we had and do not see it acting anomalously anymore, so that looks fixed.

And on a small React note, if you’re already returning a single element (in this case, <div>) no need to wrap it in a fragment (the <>). Fragments are only necessary if you would otherwise be trying to returning a bunch of “loose” elements.

Thanks for following up!