Unable to write more than 1 digit in number cell

[sajjadalidev]

`import { useState, useEffect } from "react";
import { ReactGrid } from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";
import "./style.css";
import { Modal, Button } from "react-bootstrap";
import { useLocation } from "react-router-dom/cjs/react-router-dom";
import { getSettingKey } from "../../../../../../Common/utils";
import { shallowEqual, useSelector } from "react-redux";

function NewSpreadSheet({ show, onHide, products, setFieldValue, quntityAndDiscountNotEditable }) {
const [productslist, setProducts] = useState(products || []);
const [originalProducts, setOriginalProducts] = useState(products || []);
const [searchTerm, setSearchTerm] = useState("");
const { currentBasicState } = useSelector((state) => ({ currentBasicState: state.basicSettings }), shallowEqual);
const currencySymbol = getSettingKey(currentBasicState.entity, "Basic", "currency_symbol");

const getColumns = () => [
{ columnId: "name", width: 400, resizable: true, editor: null },
{ columnId: "newPrice", width: 100, resizable: true, reorderable: true },
{ columnId: "quantity", width: 75, resizable: true, reorderable: true },
{ columnId: "discount", width: 100, resizable: true, reorderable: true },
{ columnId: "sku", width: 100, resizable: true, editor: null },
{ columnId: "upc", width: 175, resizable: true, editor: null },
{ columnId: "main_category_name", width: 200, resizable: true, editor: null },
{ columnId: "brand_name", width: 200, resizable: true, editor: null },
];

const headerRow = {
rowId: "header",
cells: [
{ type: "header", text: "Name" },
{ type: "header", text: Price(${currencySymbol}) },
{ type: "header", text: "Quantity" },
{ type: "header", text: Discount(${currencySymbol}) },
{ type: "header", text: "SKU" },
{ type: "header", text: "UPC" },
{ type: "header", text: "Main Category" },
{ type: "header", text: "Brand" },
],
};

const getFilteredProductsWithIndices = (products) => {
return (
products
?.map((product, originalIndex) => ({ product, originalIndex }))
.filter(({ product }) => {
const searchTermLower = searchTerm.toLowerCase().trim();
if (!searchTermLower) return true;

      const fields = ["name", "brand_name", "main_category_name"];
      const searchWords = searchTermLower.split(/\s+/); // Split by whitespace

      return fields.some((key) => {
        const value = product?.[key]?.toLowerCase();
        if (!value) return false;

        // Check if ALL search words are found in the field value
        return searchWords.every((searchWord) => value.includes(searchWord));
      });
    }) || []
);

};

const getRows = (products) => {
const filteredProductsWithIndices = getFilteredProductsWithIndices(products);

return [
  headerRow,
  ...filteredProductsWithIndices.map(({ product, originalIndex }, displayIndex) => ({
    rowId: `${originalIndex}`, // Use original index as string for rowId
    cells: [
      { type: "text", text: product?.name },
      { type: "number", value: Number(product?.newPrice) || 0 },
      { type: "number", value: Number(product?.quantity) || 0 },
      { type: "number", value: Number(product?.discount) || 0 },
      { type: "text", text: product?.sku || "-" },
      { type: "text", text: product?.upc || "-" },
      { type: "text", text: product?.main_category_name || "-" },
      { type: "text", text: product?.brand_name || "-" },
    ],
  })),
];

};

const applyChangesToProduct = (changes, prevProduct) => {
debugger;
const updatedProducts = [...prevProduct];
changes.forEach((change) => {
// Parse the original index from rowId (which is now a string)
const productIndex = parseInt(change.rowId, 10);
const fieldName = change.columnId;

  // Helper function to set isDirty for all unit_prices
  const setUnitPricesIsDirty = (product) => {
    if (product.unit_prices) {
      if (fieldName === "newPrice") {
        product.unit_prices[product.unit].isDirty = true;
      }
    }
  };

  if (quntityAndDiscountNotEditable) {
    if (fieldName === "newPrice") {
      let rawValue = change?.newCell?.value ?? change?.newCell?.text ?? 0;
      let num = Math.abs(Number(rawValue));
      num = isNaN(num) ? 0 : Math.floor(num * 100) / 100; // 2 decimals for price/discount
      updatedProducts[productIndex][fieldName] = num;

      // Set isDirty for unit_prices
      setUnitPricesIsDirty(updatedProducts[productIndex]);
    } else if (fieldName === "quantity" || fieldName === "discount") {
      return;
    } else {
      updatedProducts[productIndex][fieldName] = change.newCell.text;
    }
  } else {
    if (fieldName === "quantity") {
      let rawValue = change?.newCell?.value ?? change?.newCell?.text ?? 0;
      let num = Math.abs(parseInt(rawValue, 10)); // Only integer, positive
      updatedProducts[productIndex][fieldName] = isNaN(num) ? 0 : num;

      // Set isDirty for unit_prices
    } else if (["newPrice", "discount"].includes(fieldName)) {
      let rawValue = change?.newCell?.value ?? change?.newCell?.text ?? 0;
      let num = Math.abs(Number(rawValue));
      num = isNaN(num) ? 0 : Math.floor(num * 100) / 100; // 2 decimals for price/discount
      updatedProducts[productIndex][fieldName] = num;

      // Set isDirty for unit_prices
      setUnitPricesIsDirty(updatedProducts[productIndex]);
    } else {
      updatedProducts[productIndex][fieldName] = change.newCell.text;
    }
  }
});

return [...updatedProducts];

};

const handleChanges = (changes) => {
// Only allow changes for editable columns
const editableColumns = ["discount", "newPrice", "quantity"];
const filteredChanges = changes.filter((change) => editableColumns.includes(change.columnId));
if (filteredChanges?.length > 0) {
setProducts((prevProduct) => applyChangesToProduct(filteredChanges, prevProduct));
}
};

const columns = getColumns();
const columnConfig = [
{ columnId: "name", editor: null },
{ columnId: "sku", editor: null },
{ columnId: "upc", editor: null },
{ columnId: "main_category_name", editor: null },
{ columnId: "brand_name", editor: null },
];

// Check if any products match the search term
const filteredRows = getFilteredProductsWithIndices(productslist);

const handleCancel = () => {
// Reset to original products with deep clone
setProducts(deepClone(originalProducts));
setSearchTerm("");
onHide();
};

// Deep clone function to avoid reference issues
const deepClone = (obj) => {
if (obj === null || typeof obj !== "object") return obj;
if (obj instanceof Date) return new Date(obj);
if (Array.isArray(obj)) return obj.map((item) => deepClone(item));
return Object.keys(obj).reduce((cloned, key) => {
cloned[key] = deepClone(obj[key]);
return cloned;
}, {});
};

// Reset data when modal opens
useEffect(() => {
if (show) {
const clonedProducts = deepClone(products || []);
setOriginalProducts(clonedProducts);
setProducts(clonedProducts);
setSearchTerm("");
}
}, [show]);

return (

<Modal.Header>
<Modal.Title>Products</Modal.Title>

<Button
variant="secondary"
onClick={() => {
setFieldValue("sale_order_details", productslist);
onHide();
}}
className="mx-4"
>
Save Changes


Cancel

</Modal.Header>
<Modal.Body className="custom-modal-body">
<label
className="form-label text-xl"
style={{ fontSize: "16px", fontWeight: "500", position: "sticky", top: 0, zIndex: 10, paddingTop: "10px", paddingBottom: "10px" }}
>
Search by product name/brand/category

<input
type="text"
placeholder="Search by product name/brand/category"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="mb-3 form-control"
style={{ width: "50%", fontSize: "18px" }}
/>
{filteredRows?.length === 0 ? (

No products found

) : (

)}
</Modal.Body>

);
}

export default NewSpreadSheet;
`
Here is my component, but its working very wiered. sometime working fine but sometime it showing me an error

[sajjadalidev]

Uncaught TypeError: Cannot read properties of undefined (reading '0')
at 9.3b7b1902.chunk.js:2:50252
at Ie (9.3b7b1902.chunk.js:2:50295)
at onChange (9.3b7b1902.chunk.js:2:52459)
at Object.Fe (7.75003bd7.chunk.js:2:3270367)
at Ye (7.75003bd7.chunk.js:2:3270521)
at 7.75003bd7.chunk.js:2:3288746
at Er (7.75003bd7.chunk.js:2:3288840)
at _r (7.75003bd7.chunk.js:2:3289255)
at 7.75003bd7.chunk.js:2:3294903
at Le (7.75003bd7.chunk.js:2:3370624)

[sajjadalidev]

This is the issue that i am getting now whenever i try to write more than one digit in a cell it does not work and throw this error