Input fields of react-data-table losing focus after typing

Question

I use react-data-table-component. I have a dynamic list with inputs as seen on the picture. Every time I try to write text in a field it loses focus so I cannot write. I tried a lot including placing autofocus, adding keys to divs and fields. The same thing happens if I use simple variables(variantList) rather than field values(values.variant_list). The same code works with reactstrap table and if I use html table. I have the use this library because I will be adding expandable rows. So this is the code below. Any help will be appreciated.

   const variantTableColumns = [
    {
      name: t('product.field.variant_name'),
      sortable: true,
      cell: row => <div>{row.name}</div>
    },
    {
      name: t('product.field.sku'),
      sortable: true,
      cell: row => (
         <div key={`variantlist1-${row.idx}`}  >
          <Input
            name={`sku-${row.idx}`}
            id={`sku-${row.idx}`}
            key={`sku-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'sku')}
            type="text"
            value={values.variant_list[row.idx].sku}
          />
        </div>
      )
    },
    {
      name: t('product.field.barcode'),
      sortable: true,
      cell: row => (
        <div key={`variantlist2-${row.idx}`}  >
          <Input
            name={`barcode-${row.idx}`}
            id={`barcode-${row.idx}`}
            key={`barcode-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'barcode')}
            type="text"
            value={values.variant_list[row.idx].barcode}
          />
        </div>
      )
    },
    {
      name: t('product.field.supplier_code'),
      sortable: true,
      cell: row => (
        <div key={`variantlist3-${row.idx}`}  >
          <Input
            name={`supplier_code-${row.idx}`}
            id={`supplier_code-${row.idx}`}
            key={`supplier_code-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'supplier_code')}
            type="text"
            value={values.variant_list[row.idx].supplier_code}
          />
        </div>
      )
    },
    {
      name: t('product.field.supply_price'),
      sortable: true,
      cell: row => (
        <div key={`variantlist4-${row.idx}`}  >
          <Input
            name={`supply_price-${row.idx}`}
            id={`supply_price-${row.idx}`}
            key={`supply_price-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'supply_price')}
            type="text"
            value={values.variant_list[row.idx].supply_price}
          />
        </div>
      )
    },
    {
      name: t('product.field.retail_price'),
      sortable: true,
      cell: row => (
        <div key={`variantlist5-${row.idx}`}  >
          <Input
            name={`retail_price-${row.idx}`}
            id={`retail_price-${row.idx}`}
            key={`retail_price-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'retail_price')}
            type="text"
            value={values.variant_list[row.idx].retail_price}
          />
        </div>
      )
    },
    {
      name: t('product.field.variant_active'),
      sortable: true,
      cell: row => (
        <div key={`variantlist6-${row.idx}`}  >
          <Switch
            name={`active-${row.idx}`}
            id={`active-${row.idx}`}
            key={`active-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'active', row.idx)}
            checked={values.variant_list[row.idx].active}
            className="react-switch-block"
          />
        </div>
      )
    },
    {
      sortable: false,
      right: true,
      cell: row => (
        <div>
          <Button sm color="secondary" class="btn-sm" onClick={event => handleRemoveVariantListItem(event,row.id)}>
            <FontAwesomeIcon icon={faTrashAlt} style={{ fontSize: 14,  marginBottom: '1px' }} />
          </Button>
        </div>
      )
    }
  ];

  const handleVariantListItemChange = (e,classname, idx=null) => {
    let listvariants = values.variant_list;
    if (classname === 'active') {
      listvariants[idx][classname] = e
    } else {
      listvariants[e.target.dataset.idx][classname] = e.target.value;
    }
    setFieldValue('variant_list', listvariants);
  };

 <DataTable
              columns={variantTableColumns}
              customStyles={variantTableStyles}
              striped={true}
              striped={true}
              fixedHeader={true}
              data={values.variant_list}
            />

Answer 1

Since in your onChange you call some function, it probably changes the <Input/>'s value. And because of that, the Datatable rerenders whole row. To solve this, use a separate component with its own state and a "finish" function, which should be called in onBlur prop. And don't change any props you are passing to that component untill you are finished with input.