focus() is erroneously called 50ms after the user has selected a new value #442
Description
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);
}