CODEWITHSUNDEEP
reactjsselectinputreact-select
Sowam
Sowam

Reputation: 1736

React select multi select one option not clearable

I am using react-select in my project. I have it for multiple select and it looks like this:

enter image description here

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

enter image description here

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

Upvotes: 1

Views: 10283

Answers (3)

Malcev Pavel
Malcev Pavel

Reputation: 11

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}
        />
    );
};

Upvotes: 0

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

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

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

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

Edit 67302509/react-select-multi-select-one-option-not-clearable

Upvotes: 5

Related Questions