React select multi select one option not clearable - reactjs

Question

I am using react-select in my project. I have it for multiple select and it looks like this:
and it works fine. The problem is I would like to have one option already selected and it would be not clearable so it will not have "X" near it
I just need it for one option, all others have to be normally in the options and clearable.
How can I achieve that? Is it a special prop added to options or can I check them some way that if option name is commercial it will not have possibility to clear and would be selected on initial

Answer 1

react-select has a fixed options example on the docs but I found this solution is much cleaner. You can remove MultiValueRemove component (the delete button) based on the option value:
const MultiValueRemove = (props) => {
if (props.data.isFixed) {
return null;
}
return <components.MultiValueRemove {...props} />;
};
export default () => {
return (
<Select
isMulti
defaultValue={[colourOptions[0], colourOptions[1]]}
isClearable={false}
options={colourOptions}
components={{ MultiValueRemove }}
/>
);
};
The select above will remove the delete button of any option that has the isFixed property set to true (the first 2 options below).
export const colourOptions = [
{ value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
{ value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
{ value: 'purple', label: 'Purple', color: '#5243AA' },
{ value: 'orange', label: 'Orange', color: '#FF8B00' },
{ value: 'yellow', label: 'Yellow', color: '#FFC400' },
{ value: 'green', label: 'Green', color: '#36B37E' },
{ value: 'forest', label: 'Forest', color: '#00875A' },
{ value: 'slate', label: 'Slate', color: '#253858' },
{ value: 'silver', label: 'Silver', color: '#666666' },
];
Live Demo

Answer 2

You can remove that by using isClearable props of react-select like below
Consider your options array have fixed boolean set to true
<Select
// other props
isClearable={options.some(v => !v.isFixed)}
/>
And you can change you multiValueRemove in styles const like this
const styles = {
// other styles here
multiValueRemove: (base, state) => {
return state.data.isFixed ? { ...base, display: 'none' } : base;
},
};
You can find more info in Fixed option section of https://react-select.com/home#fixed-options

Answer 3

Try this:
export const CreatingSelect: FC<CreatingSelectProps> = (props) => {
const { className, components, ...restProps } = props;
const selectClassName = cn('select', className);
const MultiValueRemove = (props: PropsWithChildren<any>) => {
return (
<div className={props.innerProps.className} onClick={props.innerProps.onClick}>
<SvgIcon name={iconNames.cross} />
</div>
);
};
return (
<SelectStyled
styles={customStyles}
className={selectClassName}
classNamePrefix='select'
components={{ ...components, MultiValueRemove }}
{...restProps}
/>
);
};