Select with `clearable={false}` can still be cleared with backspace

Here’s a Plunker: https://plnkr.co/edit/ZaFyPW0zGqcf2oWeVnaL?p=preview

Note that although it has clearable={false}, you can still clear the value by focusing the field and pressing Backspace. To disable this behavior, you have to also explicitly set deleteRemoves={false}.

This is surprising to me; I would expect that clearable={false} would mean that you can never get a null (or empty array, to be more precise) value from the field.

Maybe deleteRemoves should default to the value of clearable? Or require both deleteRemoves and clearable to be true for the backspace behavior?

[Rall3n]

@pohsoon Yes you can. react-select v2 gives you the ability to redefine the internal components with its components prop. Components that can be redefined also include the ClearIndicator. You just have to set the ClearIndicator in components prop to null, and the indicator will not render, but the clearing functionality will still be present.

<Select
    { ... }
    components={{
        ClearIndicator: null
    }}
 />

CodeSandbox

[tutok]

Actually I have opposite problem, I specified backspaceRemoves={true} deleteRemoves={true} and I can not remove selected value until I start typing.

return (
    <Select.AsyncCreatable name={input.name} placeholder={placeholder} 
    backspaceRemoves={true} deleteRemoves={true} searchable={true} 
    arrowRenderer={arrowRenderer} searchPromptText={t('lookupTypeToSearch')} 
    promptTextCreator={x => t('lookupCreate', { replace: { item: x } })} value={input.value} 
    valueKey={props.valueKey} labelKey={props.labelKey} loadOptions={onLoadOptionsHandler}
    onChange={onChangeHandler} />
);