focus() is erroneously called 50ms after the user has selected a new value

[BrannJoly]

When the user selects an item in the dropdown, the focus is returned to the dropdown in a settimeout(50).

In my scenario, when the user selects something, I want to create a new field somewhere on the page and focus it, but there's no way to do that without resorting to an ugly setTimeout()

I'm not sure whether this behavior is by design or not. SetValue is called with no second parameter, and this is interpreted as focusAfterUpdate=true (see commented code below)

It's easy to fix my use case by calling setValue(value, false) instead of setValue(value)

Shall I submit a Pull Request, or is there a good reason to keep this behavior ?

 selectValue: function selectValue(value) {
  if (!this.props.multi) {
   this.setValue(value); // no 2nd parameter here
  } else if (value) {
   this.addValue(value);
  }
  this._unbindCloseMenuIfClickedOutside();
 },


setValue: function(value, focusAfterUpdate) { // focusAfterUpdate === undefined here
        if (focusAfterUpdate || focusAfterUpdate === undefined) {
            this._focusAfterUpdate = true; // this gets executed
        }
        var newState = this.getStateFromValue(value);
        newState.isOpen = false;
        this.fireChangeEvent(newState);
        this.setState(newState);
    },

componentDidUpdate: function() {
        if (!this.props.disabled && this._focusAfterUpdate) { // _focusAfterUpdate is true here
            clearTimeout(this._blurTimeout);
            this._focusTimeout = setTimeout(() => {
                this.getInputNode().focus(); // this breaks my use case
                this._focusAfterUpdate = false;
            }, 50);
        }

[AugustinLF]

I'm interested by such a use case. I use react-select as a global Facebook-like searchbar, that the user uses to change of page. Right now, the select is automatically refocused, which is extremly weird for the user.

I'm still on the 0.6 version, since I don't support React 0.14 yet. So perhaps my comment is outdated :)

[dylanjbarth]

We have a similar use case and this behavior has turned into a UX issue on our end because we'd like to move focus to elements which are created on change, rather than keep it on the original select component.

[levibotelho]

This post is a few months old, but to be clear this is present in the 1.0.0 beta.

[AugustinLF]

It has been fixed in the v1.0.0-beta9, with the autoblur prop! At least it works for me :)

[levibotelho]

@AugustinLF good to know I'll update my beta version and see if that helps. Thanks!

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples