Bug fixes

Author: nick-keller

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.3.9
+> Date: 2021-12-07
+### Fixed
+- Selection was overflowing when pasting a single row that overflows to the right
+- A state could be updated (triggering a warning) after the component was unmounted
+
 ## 3.3.8
 > Date: 2021-12-05
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datasheet-grid",
-  "version": "3.3.8",
+  "version": "3.3.9",
   "description": "An Excel-like React component to create beautiful spreadsheets.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/DataSheetGrid.tsx

@@ -669,7 +669,10 @@ export const DataSheetGrid = React.memo(
               onChange(newData)
               setActiveCell({ col: min.col, row: min.row })
               setSelectionCell({
-                col: min.col + pasteData[0].length - 1,
+                col: Math.min(
+                  min.col + pasteData[0].length - 1,
+                  columns.length - (hasStickyRightColumn ? 3 : 2)
+                ),
                 row: max.row,
               })
             } else {

src/hooks/useDebounceState.ts

@@ -1,17 +1,20 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { debounce } from 'throttle-debounce'
 
 export const useDebounceState = <T>(
   defaultValue: T,
   delay: number
 ): [T, (nextVal: T) => void] => {
   const [debouncedValue, setDebouncedValue] = useState(defaultValue)
+  const cancelRef = useRef<debounce<(newValue: T) => void>>()
+
+  useEffect(() => () => cancelRef.current?.cancel(), [])
 
   const setValue = useMemo(
     () =>
-      debounce(delay, (newValue: T) => {
+      (cancelRef.current = debounce(delay, (newValue: T) => {
         setDebouncedValue(newValue)
-      }),
+      })),
     [delay]
   )
 

tests/paste.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import {
-  DataSheetGrid,
   Column,
-  textColumn,
-  keyColumn,
+  DataSheetGrid,
   DataSheetGridRef,
+  keyColumn,
+  textColumn,
 } from '../src'
 
 jest.mock('react-resize-detector', () => ({