React-select: issue with autofocus on selected option in menu

[mrudowski]

Hello,

I think this example will show more than I can describe:
https://codesandbox.io/s/31r9vrq531?fontsize=14&module=%2Fexample.js

react-select component sets focus perfectly only in the first example,
but when we define options directly to it or recreate value by hand it sets focus on first element.

Why there is a difference?

best regards

[kingedward35]

The first example in your demo doesn't work for me, but I think I know what the issue is. I had the same issue and it seems to be a problem with how react-select decides what the index of the options is to be focused. In the react-select code it uses this function to set the focused index menuOptions.focusable.indexOf(selectValue[0]) to see if the value that has been selected is inside the focusable array. Since the values are objects and the indexOf function uses references to determine equality, if the selected value has the same values as an object inside the focusable array, but it doesn't have the same reference, it will return -1 for the focused index. Here is an amended version of the Code Sandbox that you used. https://codesandbox.io/s/reactselectfocusonselectedoptionbug-3yq1x
Hope this helps.

[mrudowski]

Thank you for your time and analysis
That could (have to) be it

But doesn't that mean that react-select shouldn't use indexOf for that?

[kingedward35]

I can't answer that question. However it would be nice to use a function that would use structural equality as opposed to referential equality. Glad I could be of help.

[Darmikon]

I have the same issue with v3 version. In addition I'm trying to use not objects as values but id numbers. And the focused option is always the first one despite selected value. If somebody has any ideas please share.

inputId="id"
getOptionLabel={_.path('name')}
getOptionValue={_.path('id')}
onChange={(val) => this.props.onChange(val.id)}
value={options.find((option) => option.id === value)}
...