Recently, I encountered an issue while working with the react-select dropdown in my project. After selecting an option from the dropdown, I noticed that all the option backgrounds turned blue. Upon inspection, I found that all options had the class name "react-select-option-is-selected."
It was crucial for me to have the background color applied only to the selected option, rather than all options. https://i.sstatic.net/kWFnE.png
import Select from 'react-select';
const savedLists = [
{
"__typename": "List",
"key": "3232",
"name": "Saved List A"
},
{
"__typename": "List",
"key": "323",
"name": "rwecrrrcrcsas"
},
]
const modifiedSavedList = savedLists.map(({ name: label, ...rest }) => ({
label, ...rest
}));
const onChangeHandler = (selectedDestination) => {
const searchParams = new URLSearchParams(location.search);
const checkedProductsIds = items.filter((e, i) => checkedList.some(j => i == j)).map(obj => (obj.uid));
const sourceUID = searchParams.get('uid');
SetOptionSelected(selectedDestination.name)
copyitmes(sourceUID, selectedDestination, checkedProductsIds)
}
<Select
className="itemListDropdown"
classNamePrefix="react-select"
options={modifiedSavedList}
isSearchable={false}
placeholder={<div>Copy to</div>}
components={{ IndicatorSeparator: () => null }}
onChange={onChangeHandler}
/>
.itemListDropdown {
box-sizing: border-box;
width: 71%;
height: 36px;
color: $color-medium-grey !important;
font-weight: 400;
margin-left: auto;
.react-select__control {
height: 35px;
border-radius: 2px;
border: 1px solid $color-medium-grey;
text-align: left;
padding-left: 12px;
box-shadow: none;
}
.react-select__value-container {
height: $input-box-min-height;
align-content: center;
}
.react-select__value-container,
.react-select__menu,
.react-select__input-container,
.react-select__menu-list {
padding: unset;
margin: unset;
}
.react-select__menu {
box-shadow: unset;
}
.react-select__option--is-selected {
background-color: $select-menu-background-hover;
color: $color-white;
}
.react-select__control--menu-is-open {
border-color: $color-medium-grey !important;
border-style: solid !important;
border-width: 2px 2px 1px 2px !important;
box-shadow: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.react-select__placeholder,
.react-select__indicator {
margin-bottom: 5px;
}
}