React-select: focused option starting at the selected option

[csantos1113]

Seems that on v3.0.0 there was a change introduced in the way the focused option is determined.

✅ Here is an example of how it worked on v2.4.4: https://codesandbox.io/s/react-codesandboxer-example-sywkk

• Selected option ==> Blue background ==> "Purple" option
• Focused option ==> Light blue ==> Starts in "Purple" option and you could move from there.

Which is the same as the behavior of the native select inputs:

---

❌ Here is the same exact example running on v3.0.4: https://codesandbox.io/s/react-codesandboxer-example-3cutx

• Selected option ==> Blue background ==> "Purple" option
• Focused option ==> Light blue ==> Starts in "Ocean" option.

---

Not sure if this is an issue, or if it was a change intentional made.
But, how can I get the focused option starting at the selected option?

[ankush29]

solved https://github.com/JedWatson/react-select/pull/3652/commits/bb9c1d7bf53a68aa6bd4e6be5c40c3b0c14a7c01

[csantos1113]

Thanks @ankush29 - will be fixed on PR https://github.com/JedWatson/react-select/pull/3652

[guiyep]

Hello,

I still see this error happening in 3.0.4. Any idea when this is going to be merged?

Thanks for the good work!
Guiyep

[dicrescenzoa]

Thanks @ankush29 - will be fixed on PR #3652

Waiting for this fix 👍 as well

[imnikij]

Hey @csantos1113 I am getting same error on v2.4,4, are you sure this occurs only for v3.0.0 and above ? Any fix for this ? I am overriding Option component as below:

       const Option = (props) => {
            const path =`xyz`
            return <div>
                <Link to={path}>
                    <components.Option {...props} />
                </Link>
            </div>
        };

        selectorComponent = <Select
            label='Select ...'
            value={this.props.selectedValue}
            options={Options}
            onChange={this.onChange}
            isDisabled={this.props.isLoading }
            backspaceRemovesValue={true}
            closeMenuOnSelect={true}
            escapeClearsValue={true}
            isSearchable={true}
            isClearable={true}
            components={{
                Option
            }}
        />;

Am I missing something that should be added in v2.4.4, or is it that now this feature does not work for this version as well ?

[guiyep]

Hello, Any update on this?

I still see this happening in 3.0.8.

Thanks!

[carlosriveroib]

yes, still happening in 3.0.8. Will you update this?

[nsobolev]

Go update, please! :)

[Zorak070]

This issue is still prevailing. Any solutions till now?

[dicrescenzoa]

This issue is still prevailing. Any solutions till now?

this it the PR related to this issue, It seems it's taking more than a year to be resolved. I think that would be better to move on another library:

https://github.com/furqanZafar/react-selectize/

[asazernik]

This seems to have been fixed in #3868 (though @andreme reports there's still a bug in the fix). Can we close this out?

[csantos1113]

Yes, let's close this.

I forked my own example and updated to latest react-select version 3.1.0 and it's working as expected now: https://codesandbox.io/s/react-codesandboxer-example-pcfsi

Thanks