React-select: Select with `clearable={false}` can still be cleared with backspace

[dallonf]

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?

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

[mramosArg]

@dallonf I have the same issue at the version 1.0.0-rc.4

[agirton]

Hi @dallonf to me clearable refers to the x icon. However I could see the confusion for users that may think that means also the delete key. Since we want this to be configurable, I don't think setting a default based on another prop is ideal. Maybe just document this behavior more thoroughly?

@tutok this sounds like a separate issue. Do you mind opening an issue with a reproducible case?

[jackwilsdon]

I feel like this is inconsistent at the moment, as escapeRemoves _does_ depend on clearable being true, whereas backspaceRemoves and deleteRemoves do not.

[jfly]

Any update here? I was very surprised to find out that when I set clearable to false, my select is in fact, still clearable. (RE @agirton's comment: if that's really what clearable is supposed to mean, then we should call it something like showClearIcon.)

Would you be open to a PR that sets backspaceRemoves to false and deleteRemoves to false if they are not already specified and clearable is set to false?

[pohsoon]

I would suggest to have a property showClearIcon so that we are able to decide which the way of clearing is more appropriate in actual usage context, either by Backspace, Delete or mouse click icon.
With current latest code, we cannot hide clear icon and allow only backspace/delete to clear.

[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

[pohsoon]

@Rall3n Good to know that. Thank you!