React-select: Removing 'x' from selected values on multi select

[RobertButera]

Is there a way to remove the 'x' from the selected item?

I understand 'clearableValue: false' can be used on the option to prevent option removal entirely and remove the 'x'. For my use case I would like to retain the ability to remove the item using the backspace but remove the'x'.

[rubencodes]

Hello,

There is no documented way to do this to my knowledge. ThevalueRenderer option for defining a custom value renderer only allows you to decorate the inside of the tag, so no getting rid of the "x". I'd suggest using CSS to hide it, or submitting a PR :)

[RobertButera]

@rubencodes, I discovered there is a way. The valueComponent property can be used to provide an alternate implementation of the component that renders the selected value. The following example demonstrates: examples/component/CustomComponents.js.

What's not obvious is that this also works in a Select.Creatable, and it does. This is my custom ValueComponent which renders selected values without an 'x'.

let SelectedValue = (props) => { return ( <div className="Select-value" title={props.value.label}> <span className="Select-value-label"> {props.children} </span> </div> ) };

[rubencodes]

Wonderful! Glad you got it figured out. Thanks for sharing!

[AndreiCalazans]

I got something similar but i can't get the removal function working on click of my custom X. any ideas ?

this is the component I'm using for the valueComponent
const BadgeComponent = (props) => { return ( <BadgeCont> <img src={props.value.image} alt=""/> <p className="name">{props.value.primaryText}</p> <p onClick={props.onRemove} className="close">X</p> </BadgeCont> ); };

[AndreiCalazans]

never mind. When creating a custom component for the valueComponent, you can remove the selected value by passing the onRemove function with the value as a parameter.
This is how i fixed the code above.

const BadgeComponent = (props) => { return ( <BadgeCont> <img src={props.value.image} alt=""/> <p className="name">{props.value.primaryText}</p> <p onClick={() => props.onRemove(props.value)} className="close">X</p> </BadgeCont> ); };

[oztek22]

I'm not sure if it's right solution or not. But It worked for me.
Just give it display none from css.

.Select-clear-zone {
display: none !important;
}

[alienfacepalm]

clearable={false}

[andanhm]

clearable={false} didn't work for me. After debuging the code, isClearable={false} worked

[ansonkao]

Note that the older comments from 2017 are for V1 and the API has changed a lot since with V2

[shubhamgoswamiofficial]

for older version it's clearable={false}
and for new version it's isClearable={false}

syntax:

clearable={false}

name="form-field-name2"
value={this.state.selectedVersion[key]}
onChange={this.selectVersion.bind(this, key)}
options={this.state.version}
className="cm_select" />

[slothdude]

Combining some of the previous answers worked for me

<Select
    components={{DropdownIndicator: null}}
    classNamePrefix="react-select"
    placeholder=""
    clearable={false}
    isMulti
    isDisabled
        ...
/>

and in css:
.react-select__multi-value__remove {
    display: none !important;
}

[LillaEli]

isClearable={false} is for the whole select component, if you want to remove the cross from the selected options when isMulti is on you can make your own modified styling like so:

const customStyles = { multiValueRemove: (base) => ({ ...base, display: 'none' }) }

and then feed it into the select, like so:

<Select options={options} styles={customStyles} . . .

[tuanitpro]

isClearable={false} is for the whole select component, if you want to remove the cross from the selected options when isMulti is on you can make your own modified styling like so:

const customStyles = { multiValueRemove: (base) => ({ ...base, display: 'none' }) }

and then feed it into the select, like so:

<Select options={options} styles={customStyles} . . .

Worked. Many thanks!

[maxlund]

isClearable={false} is for the whole select component, if you want to remove the cross from the selected options when isMulti is on you can make your own modified styling like so:

const customStyles = { multiValueRemove: (base) => ({ ...base, display: 'none' }) }

and then feed it into the select, like so:

<Select options={options} styles={customStyles} . . .

@LillaEli Any way to control this for individual options, i.e. not remove the 'x' for all options?

[kstratis]

@maxlund What you are looking for are the "fixed" options.