React-select: explicitly call .blur() on select?

[Pomax]

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.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

[Pomax]

it might be 4 years old, but unless this got fixed: this is _technically_ a UX and accessibility bug.

Elements should be assigned focus by the browser, based on what it knows about whether code or a user did something. It should never indiscriminately claim focus on its own. Setting a value on a form element should only set the current value, and do nothing else.

[bladey]

Thanks @Pomax!

[ebonow]

Greetings @Pomax ,

This has indeed aged a bit, and I am not able to replicate the issue.

In my test setup, I have a react-select and an input.

1) The input is set to autofocus.
2) onMount, a 3 second setTimeout is set to update the value of the react-select.

The test shows that the select-value is set without stealing focus from the input. Please let me know if I am misinterpreting the use-case you are trying to achieve as I would like to have any long standing issues resolved without any loose ends.

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