fix: DynamicDataTable - handled case where cell was getting autofocused on mount

Author: RohitRaj011

src/Shared/Components/DynamicDataTable/DynamicDataTable.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 import { DynamicDataTableHeader } from './DynamicDataTableHeader'
 import { DynamicDataTableRow } from './DynamicDataTableRow'
@@ -24,14 +24,30 @@ import './styles.scss'
 
 export const DynamicDataTable = <K extends string, CustomStateType = Record<string, unknown>>({
     headers,
+    onRowAdd,
     ...props
 }: DynamicDataTableProps<K, CustomStateType>) => {
+    // STATES
+    const [isAddRowButtonClicked, setIsAddRowButtonClicked] = useState(false)
+
+    // CONSTANTS
     const filteredHeaders = useMemo(() => headers.filter(({ isHidden }) => !isHidden), [headers])
 
+    // HANDLERS
+    const handleRowAdd = () => {
+        setIsAddRowButtonClicked(true)
+        onRowAdd()
+    }
+
     return (
         <div className="w-100">
-            <DynamicDataTableHeader headers={filteredHeaders} {...props} />
-            <DynamicDataTableRow headers={filteredHeaders} {...props} />
+            <DynamicDataTableHeader headers={filteredHeaders} onRowAdd={handleRowAdd} {...props} />
+            <DynamicDataTableRow
+                headers={filteredHeaders}
+                isAddRowButtonClicked={isAddRowButtonClicked}
+                setIsAddRowButtonClicked={setIsAddRowButtonClicked}
+                {...props}
+            />
         </div>
     )
 }

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -73,6 +73,8 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     trailingCellIcon,
     buttonCellWrapComponent,
     focusableFieldKey,
+    isAddRowButtonClicked,
+    setIsAddRowButtonClicked,
 }: DynamicDataTableRowProps<K, CustomStateType>) => {
     // CONSTANTS
     const isFirstRowEmpty = headers.every(({ key }) => !rows[0]?.data[key].value)
@@ -105,6 +107,8 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     useEffect(() => {
         setIsRowAdded(rows.length > 0 && Object.keys(cellRef.current).length < rows.length)
 
+        // When a new row is added, we create references for its cells.
+        // This logic ensures that references are created only for the newly added row, while retaining the existing references.
         const updatedCellRef = rowIds.reduce((acc, curr) => {
             if (cellRef.current[curr]) {
                 acc[curr] = cellRef.current[curr]
@@ -118,15 +122,16 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     }, [JSON.stringify(rowIds)])
 
     useEffect(() => {
-        if (isRowAdded) {
+        if (isAddRowButtonClicked && 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)
+                setIsAddRowButtonClicked(false)
             }
         }
-    }, [isRowAdded])
+    }, [isRowAdded, isAddRowButtonClicked])
 
     // METHODS
     const onChange =

src/Shared/Components/DynamicDataTable/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DetailedHTMLProps, ReactElement, ReactNode } from 'react'
+import { DetailedHTMLProps, Dispatch, ReactElement, ReactNode, SetStateAction } from 'react'
 
 import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
 import { UseStateFiltersReturnType } from '@Common/Hooks'
@@ -261,4 +261,7 @@ export interface DynamicDataTableRowProps<K extends string, CustomStateType = Re
         | 'trailingCellIcon'
         | 'buttonCellWrapComponent'
         | 'focusableFieldKey'
-    > {}
+    > {
+    isAddRowButtonClicked: boolean
+    setIsAddRowButtonClicked: Dispatch<SetStateAction<boolean>>
+}