react-select: closeMenuOnSelect and blurInputOnSelect not working properly - reactjs

Question

I have a Select component like this:
<Select
className="multiple-select"
closeMenuOnSelect={false}
blurInputOnSelect={false}
hideSelectedOptions={false}
isMulti
autoFocus
isSearchable
/>
I have also other props for handle de data, options etc, but that's not the case here, i think.
Why my component is closing every time i select an option? even with this props.
There's something related to the component re-render when I select an option? And what can I do to fix this?
UPDATE
Giving more context to the code...
I have a custom style:
const customStyles = {
control: (base, state) => ({
...base,
boxShadow: state.isFocused ? 0 : 0,
borderColor: state.isFocused ? '#FFC600' : '#9CAEC1',
'&:hover': {
borderColor: state.isFocused ? '#FFC600' : base.borderColor,
},
}),
placeholder: (base) => ({
...base,
font: 'normal 15px/24px Montserrat',
color: '#9CAEC1',
}),
option: (base, state) => ({
...base,
minHeight: '62px',
maxHeight: '62px',
width: '270px',
minWidth: '270px',
maxWidth: '270px',
lineHeight: '48px !important',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: 'inline-block',
verticalAlign: 'middle',
cursor: 'pointer',
font: 'normal 15px/24px Montserrat',
color: state.isSelected ? '#fff' : '#6D839A',
backgroundColor: state.isSelected ? '#029619' : null,
':hover': {
background: '#029619',
color: '#fff',
},
}),
menuList: (base) => ({
...base,
minHeight: 'auto',
maxHeight: '250px',
'::-webkit-scrollbar': {
width: '10px',
height: '10px',
},
'::-webkit-scrollbar-track': {
background: '#E4E8ED',
borderRadius: '5rem',
},
'::-webkit-scrollbar-thumb': {
background: '#6D839A',
borderRadius: '5rem',
},
}),
valueContainer: (provided, state) => ({
...provided,
textOverflow: 'ellipsis',
maxWidth: '90%',
whiteSpace: 'nowrap',
overflow: 'hidden',
display: 'initial',
font: 'normal 15px/24px Montserrat',
color: '#6D839A',
}),
};
I customized too the multivalue container:
const multiValueContainer = ({ selectProps, data }) => {
const label = data.value;
const val = `${label}, `;
return val;
};
My component looks like this: (the onClickHandler function that I receive by props just set a state in a reducer, where this state receive the options selected)
function MultipleSelect(props) {
const { onClickHandler, data, selected, label } = props;
function msg() {
if (data.length > 0) {
return `Sorry, no results :(`;
} else {
return 'Loading items...';
}
}
function onSelectHandler(e) {
if (e.length === 0) {
onClickHandler([], props);
} else {
const selected_ideas = [];
e.forEach((option_selected) => {
selected_ideas.push(
...data.filter((idea) => idea.value === option_selected.value),
);
});
if (selected_ideas.length) {
onClickHandler(selected_ideas, props);
} else {
console.warn('onSelectHandler received invalid argument -> ', e);
return;
}
}
}
return (
<Wrapper selected={selected}>
<Select
className="multiple-select"
components={{ MultiValueContainer: multiValueContainer }}
styles={customStyles}
options={data}
value={selected}
onChange={onSelectHandler}
placeholder={label}
noOptionsMessage={msg}
closeMenuOnSelect={false}
blurInputOnSelect={false}
hideSelectedOptions={false}
isMulti
autoFocus
isSearchable
/>
</Wrapper>
);
}
MultipleSelect.propTypes = {
onClickHandler: PropTypes.func.isRequired,
data: PropTypes.arrayOf(
PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
}),
).isRequired,
label: PropTypes.string.isRequired,
};
export default MultipleSelect;
My Wrapper component:
const Wrapper = styled('div')`
position: relative;
width: 100%;
max-width: 280px;
height: fit-content;
display: flex;
flex-direction: column;
margin: 24px auto;
justify-content: center;
align-items: center;
.multiple-select {
width: 100%;
}
.multiple-select .css-tlfecz-indicatorContainer,
.multiple-select .css-1okebmr-indicatorSeparator {
color: ${(props) => props.theme.colors.gray300};
}
.multiple-select .css-b8ldur-Input {
font: normal 15px/24px Montserrat;
border-top: ${(props) =>
props.selected.length > 0 ? `1px solid #9CAEC1` : 'none'};
}
`;