Merge pull request #487 from devtron-labs/fix/dynamic-data-table-ref

fix: DynamicDataTable - cellRef check update, rowIds memoised

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.3.11",
+    "version": "1.3.11-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,4 +1,14 @@
-import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect, useRef, useState } from 'react'
+import {
+    createElement,
+    createRef,
+    Fragment,
+    ReactElement,
+    RefObject,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { followCursor } from 'tippy.js'
 
@@ -74,10 +84,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
             {},
         )
     }
+    const rowIds = useMemo(() => rows.map(({ id }) => id), [rows])
 
     useEffect(() => {
         setIsRowAdded(rows.length > 0 && Object.keys(cellRef.current).length < rows.length)
-        const rowIds = rows.map(({ id }) => id)
 
         const updatedCellRef = rowIds.reduce((acc, curr) => {
             if (cellRef.current[curr]) {
@@ -89,14 +99,16 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
         }, {})
 
         cellRef.current = updatedCellRef
-    }, [rows.length])
+    }, [JSON.stringify(rowIds)])
 
     useEffect(() => {
-        // Using the below logic to ensure the cell is focused after row addition.
-        const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current
-        if (isRowAdded && cell) {
-            cell.focus()
-            setIsRowAdded(false)
+        if (isRowAdded) {
+            // Using the below logic to ensure the cell is focused after row addition.
+            const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current
+            if (cell) {
+                cell.focus()
+                setIsRowAdded(false)
+            }
         }
     }, [isRowAdded])