How to get cancel button click event on Creatable react-select

[thakran1989]

I have been working on a project where I have used react-select creatable custom CreateSelect option (Multi Select input Text).

Now All I need is when I am adding any values I am able to add it easily. But when I am trying to remove the item that time I am checking in onChange function as mentioned in the example but all I am getting is full list of options. Here is my code snippet :

> <CreatableSelect
>             placeholder={subDevice.text}
>             isMulti
>             inputValue={subDeviceVal}
>             onInputChange={onInputChange}
>             components={components}
>             onKeyDown={handleKeyDown}
>             onChange={onDelete.bind(this)}
>             menuIsOpen={false}
>             isClearable={false}
>             value={targets}
>           />

I am trying to delete the option and for that I need the clicked option. But I am not getting it. Is there any way that I can get the selected value here? I tried using bind(this) as well but it still gives me while list. All I want is the value which is being selected to be deleted.

[Rall3n]

Hello @thakran1989,

I hope you don't mind me converting your issue to an discussion. It seemed to be the correct place for your query.

The onChange prop/handler is called every time there is a change to value through user input.
The first parameter is the current state of value after the change. The second parameter is an object with additional information including an action meta string and different properties containing affected options.

There are different actions regarding removal of a value (deselect-option | remove-value | pop-value | clear) so you might want to check for the ones you want to react to. The property for the affected options also differs from action to action.

<Select onChange={(value, meta) => {
  meta.option // meta.action === `deselect-option`
  meta.removedValue // meta.action === `remove-value` || meta.action === `pop-value`
  meta.removedValues // meta.action === `clear`
}} />

[thakran1989]

thank you for the prompt response but i want to call a function that is 'onDelete' , but how can i call that function here

[Rall3n]

That's not what you asked for. You asked for the "value that is selected to be deleted".

But if you would like to call your function, you would have to check for the action and then call it with the appropriate action property.

(value, meta) => {
  if (meta.action === 'deselect-option')
    onDelete(meta.option);
  else if (meta.action === 'remove-value' || meta.action === 'pop-value') 
    onDelete(meta.removedValue);
  else if (meta.action === 'clear') {
    // be warned, this is an array
    onDelete(meta.removedValues);
  }

  /* ... */
}