Dropdown loses focus and jumps to first option instead of active option with controlled values

When the value is set from state (controlled) the dropdown jumps to the first option and loses focus whenever it is opened, as opposed to auto scrolling to the active option.

I couldn’t find an option to enable this. Is this a bug? Everything is fine when the value is hardcoded like in your original plunkr

Please try this plunkr to reproduce: https://plnkr.co/edit/LyMQDWVVu4yfL6pZeux4?p=preview

[anuprai11]

this might be a bug but there are 2 work arounds to this, first the reason of the problem getFocusableOptionIndex is the function that calculate of the value which option need to be focused it does nothing it takes the first value from the value-array find its index in the options sent and focus then it get focussed,

now as you are saving the value in the second plunkr as an object and passing an object back to react-select, the value is not expanded from the options. as in expandValue function there is a check if (valueType !== 'string' && valueType !== 'number' && valueType !== 'boolean') return value; Now this is in place thinking you have send a value which is from the options already so no need to expand.

After that the getFocusableOptionIndex function calculate which option to focus using options.indexOf(value) so basically comparing reference to find the index of the selected option.

The problem with your code is this. you have created the option array inside the render function so options mutate on each render. so when a value is selected an your reference to the selected differ as a new array with new objects is created.

so expand values leaves thinking what you have sent is in the options but as you have sent new objects in the options the indexOf comparision fails and focussed options is nothing.

there are two solutions one is send the value as the value of the option selected then react select will expand the value from options and focus on it or dont mutate your the objects in options after selecting a value.

I dont think here something is needed to be fixed in react-select as it is following its contract. one thing could be done is in expandValue function not returning for obects and expanding them like

if (options[i][valueKey] === value[valueKey]) return options[i]; but that is not very fruitful i think as the problem can be easily solved from outside.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we’re closing old issues.

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 aren’t using the latest version of react-select please consider upgrading to see if it resolves any issues you’re having.

However, if you feel this issue 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!