-1

I have an input field that should accept multiple inputs from options that are already set. - This input field needs to appear like tag input fields so I used the React-select library: enter image description here

The set options are going to come from a react-bootstrap-table so I disabled the built-in dropdown in the react-select input field.

The problem is that I cannot remove the selected items by deselecting the row from the react-bootstrap-table.enter image description here I think I am doing something wrong on how I'm passing the values between the input field and the table but can't figure it out.

Here is the codesandbox

TylerH
  • 20,799
  • 66
  • 75
  • 101
L.Diaz
  • 51
  • 1
  • 10

1 Answers1

1

The problem is you try to compare two Objects, however there is no generic means to determine that an object is equal to another. You could JSON.stringify them both and compare but thats not reliable way.

Instead, you can filter the array by object key, lets say label. In this case, your function should look like this:

const setSelected = (row: any, isSelect: any, rowIndex: any, e: any) => {
    if (isSelect) {
        setSelectProducts([...selectedProducts, row]);
    } else {
        const newArray = selectedProducts.filter(
            (item) => item.label !== row.label
        );
        setSelectProducts(newArray);
    }
};

Here is codesandbox to preview

@Edit

If you wanna do something onClear

onChange={(selectedOption, triggeredAction) => {
  if (triggeredAction.action === 'clear') {
    // Clear happened
  }
Damian Busz
  • 1,693
  • 1
  • 10
  • 22
  • Thank you, @Damian Busz. Is there also an easy way to unselect the item in the react-bootstrap-table from the react-select input? I'm not sure if there's an attribute in react-select to customize the clear button – L.Diaz Mar 28 '22 at 01:51
  • I have edited my original answer If the answer helps can you mark it as accepted answer? thank you @L.Diaz – Damian Busz Mar 28 '22 at 18:00