Redundant option highlight when opening the menu

[omriavigdor]

Hi!

First, Thanks for this library!
The issue might be related in some way to #1087.

As an example, look at http://jedwatson.github.io/react-select/, your demo page.
Take the first select component for example.
Do this:

1. click on the component -> the menu opens.
2. the chosen value is highlighted as expected.
3. hover on another option and move the mouse out of the menu horizontally, while keeping the hovered option highlighted still.
4. click outside.
5. the chosen value does not change.
6. open the menu again.
7. the chosen value is still the same, its option is highlighted, but the hovered option from step 3 is ALSO highlighted.

Expected: only the chosen option should be highlighted and bold when opening the menu.

Thanks!

[ryanfitzer]

This is still an issue on v3.

[jlrosenberg]

Are there any plans to fix this issue? I am experiencing this as well.

[gulamhussain08]

I had the same issue. my react-select component was missing getOptionValue props. once i added getOptionValue only selected option remains highlighted.

for eg.

<Select
    placeholder="Search Location (Enter at least 3 characters)"
    onInputChange={this.handleSearch}
    onChange={this.handleSelect}
    options={locations}
    value={selectedLocation}
    isLoading={isLoading}
    getOptionLabel={option=>option.name+", "+option.districtName+", "+option.stateName}
    getOptionValue={option=>option.townVillage}
    inputValue={searchText}
/>

[fjcerignoni]

Thanks, @gulamhussain08 it worked for me.

[ebonow]

Greetings,

This is a duplicate of #3705 which has a PR being reviewed for next release. As such I will close this issue for now, and feel free to add yourself as a subscriber to either the issue or associated PR if you would like to be notified when this feature request has been released.

[SebVory]

 const depOptions = filtersResponseObj.dep.map(f => ({ value: f.id, label: f.label }))
 const [activeDep, setActiveDep] = useState<ValueType<OptionType>>(depOptions[0])
 
  <Select
        value={activeDep}
        onChange={option => setActiveDep(option)}
        options={depOptions}
        getOptionValue={option => option.label}
      />

This finally working for me. getOptionValue={option => option.label} was what I was missing. Thanks!