React Spreadsheet Adds Extra Row on Paste

[ndegwamoche]

Summary

Pasting data from Excel into react-spreadsheet adds an extra empty row.

Description

In the BiddingExcel component, pasting Excel data into editable columns (Bid Qty, Bid Price, Comments) results in an additional empty row being appended to the spreadsheet. The issue stems from react-spreadsheet's paste event handling.

Steps to Reproduce

1. Copy multiple rows from Excel.
2. Paste into an editable column in the BiddingExcel spreadsheet.
3. Observe an extra empty row added.

Expected Behavior

Pasted data updates only the intended rows/columns without extra rows.

Actual Behavior

An empty row is appended after pasting.

Relevant Code

Paste handler in BiddingExcel:

const handlePaste = (e) => {
    if (!e.target.closest(".spreadsheet-container") || !currentActive) return;
    const { row, column } = currentActive;
    if (![7, 8, 14].includes(column)) {
        e.preventDefault();
        setMessagesDebounced([{ type: "danger", text: "Pasting restricted.", row, column }]);
        return;
    }
    let clipboardData = e.clipboardData.getData("text/plain").trim().replace(/\n+$/, "");
    const values = clipboardData.split("\n").map(cell => cell.trim()).filter(cell => cell);
    if (values[values.length - 1] === "") values.pop();
    e.preventDefault();
};

Notes

Despite trimming newlines and empty values, react-spreadsheet adds an extra row, indicating a library-level issue.

Priority

Medium

Assignee

Frontend Team

Labels

• Bug
• react-spreadsheet
• Spreadsheet

[ndegwamoche]

SOLVED

Updated the handlePaste
Solved the issue: React Spreadsheet Adds Extra Row on Paste, change this code in file Spreadsheet.tsx

var handlePaste = React__namespace.useCallback(function (event) {
        if (shouldHandleClipboardEvent(rootRef.current, mode)) {
            event.preventDefault();
            event.stopPropagation();
            if (event.clipboardData) {
                var text = readTextFromClipboard(event);
                paste$1(text);
            }
        }
    }, [mode, paste$1]);

TO

const handlePaste = React.useCallback(
    (event: ClipboardEvent) => {
      if (shouldHandleClipboardEvent(rootRef.current, mode)) {
        event.preventDefault();
        event.stopPropagation();
        if (event.clipboardData) {
          let text = readTextFromClipboard(event).trim(); // Remove leading/trailing newlines
          const rows = text
            .split("\n")
            .map((row) => row.trim())
            .filter((row) => row !== ""); // Remove empty rows
          text = rows.join("\n"); // Reconstruct cleaned text
          console.log("Cleaned Paste Text:", text); // Debug
          paste(text);
        }
      }
    },
    [mode, paste]
  );