From ecd37b65b711331cb4f839c9fb85059e875fde9d Mon Sep 17 00:00:00 2001
From: "kl.nevermore" <kl.nevermore@gmail.com>
Date: Mon, 20 May 2024 20:06:55 +0800
Subject: [PATCH] Fix:#6141:DataTable:Column: onCellEditComplete is fired twice
 (#6641)

* Fix:#6141:DataTable:Column: onCellEditComplete is fired twice

* remove unused import

* feat: use React.useEffect sync editingRowData
---
 components/lib/datatable/BodyCell.js | 55 +++++++++++++++-------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
index f6d95fb5fb..9ab5617d47 100644
--- a/components/lib/datatable/BodyCell.js
+++ b/components/lib/datatable/BodyCell.js
@@ -25,6 +25,7 @@ export const BodyCell = React.memo((props) => {
     const selfClick = React.useRef(false);
     const tabindexTimeout = React.useRef(null);
     const initFocusTimeout = React.useRef(null);
+    const editingRowDataStateRef = React.useRef(null);
     const { ptm, ptmo, cx } = props.ptCallbacks;
 
     const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
@@ -157,43 +158,41 @@ export const BodyCell = React.memo((props) => {
             unbindDocumentClickListener();
             OverlayService.off('overlay-click', overlayEventListener.current);
             overlayEventListener.current = null;
+            editingRowDataStateRef.current = null;
             selfClick.current = false;
         }, 1);
     };
 
     const switchCellToViewMode = (event, submit) => {
         const callbackParams = getCellCallbackParams(event);
+        const newRowData = { ...editingRowDataStateRef.current };
+        const newValue = resolveFieldData(newRowData);
+        const params = { ...callbackParams, newRowData, newValue };
+        const onCellEditCancel = getColumnProp('onCellEditCancel');
+        const cellEditValidator = getColumnProp('cellEditValidator');
+        const onCellEditComplete = getColumnProp('onCellEditComplete');
+
+        if (!submit && onCellEditCancel) {
+            onCellEditCancel(params);
+        }
 
-        setEditingRowDataState((prev) => {
-            const newRowData = prev;
-            const newValue = resolveFieldData(newRowData);
-            const params = { ...callbackParams, newRowData, newValue };
-            const onCellEditCancel = getColumnProp('onCellEditCancel');
-            const cellEditValidator = getColumnProp('cellEditValidator');
-            const onCellEditComplete = getColumnProp('onCellEditComplete');
-
-            if (!submit && onCellEditCancel) {
-                onCellEditCancel(params);
-            }
+        let valid = true;
 
-            let valid = true;
+        if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
+            valid = cellEditValidator(params);
+        }
 
-            if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
-                valid = cellEditValidator(params);
+        if (valid) {
+            if (submit && onCellEditComplete) {
+                onCellEditComplete(params);
             }
 
-            if (valid) {
-                if (submit && onCellEditComplete) {
-                    setTimeout(() => onCellEditComplete(params));
-                }
-
-                closeCell(event);
-            } else {
-                event.preventDefault();
-            }
+            closeCell(event);
+        } else {
+            event.preventDefault();
+        }
 
-            return newRowData;
-        });
+        setEditingRowDataState(newRowData);
     };
 
     const findNextSelectableCell = (cell) => {
@@ -523,6 +522,12 @@ export const BodyCell = React.memo((props) => {
         }
     }, [props.editingMeta]);
 
+    React.useEffect(() => {
+        if (editingRowDataState) {
+            editingRowDataStateRef.current = editingRowDataState;
+        }
+    }, [editingRowDataState]);
+
     React.useEffect(() => {
         if (props.editMode === 'cell' || props.editMode === 'row') {
             const callbackParams = getCellCallbackParams();