Merge pull request #947 from lyp000119/dev

fix: Start to analyze the page drag and drop field has a cache problem

Author: scottsut

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableSourceContainer.tsx

@@ -42,11 +42,11 @@ import {
   FONT_WEIGHT_MEDIUM,
   INFO,
   SPACE,
-  SPACE_SM,
   SPACE_TIMES,
   SUCCESS,
   WARNING,
 } from 'styles/StyleConstants';
+import { stopPPG } from 'utils/utils';
 
 export const ChartDraggableSourceContainer: FC<
   {
@@ -159,18 +159,20 @@ export const ChartDraggableSourceContainer: FC<
       <>
         <IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
         <p>{colName}</p>
-        <Dropdown
-          disabled={_isNormalField()}
-          overlay={_getExtraActionMenus()}
-          trigger={['click']}
-        >
-          <ToolbarButton
-            icon={<MoreOutlined />}
-            iconSize={FONT_SIZE_BASE}
-            className="setting"
-            onClick={e => e.preventDefault()}
-          />
-        </Dropdown>
+        <div onClick={stopPPG}>
+          <Dropdown
+            disabled={_isNormalField()}
+            overlay={_getExtraActionMenus()}
+            trigger={['click']}
+          >
+            <ToolbarButton
+              icon={<MoreOutlined />}
+              iconSize={FONT_SIZE_BASE}
+              className="setting"
+              onClick={e => e.preventDefault()}
+            />
+          </Dropdown>
+        </div>
       </>
     );
   }, [type, colName, onDeleteComputedField, onEditComputedField, category, t]);

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableSourceGroupContainer.tsx

@@ -18,7 +18,7 @@
 
 import { List } from 'antd';
 import { ChartDataViewMeta } from 'app/types/ChartDataViewMeta';
-import { FC, memo, useState } from 'react';
+import { FC, memo, useCallback, useState } from 'react';
 import styled from 'styled-components/macro';
 import { stopPPG } from 'utils/utils';
 import { ChartDraggableSourceContainer } from './ChartDraggableSourceContainer';
@@ -91,6 +91,14 @@ export const ChartDraggableSourceGroupContainer: FC<{
     }
   };
 
+  const handleEditComputedField = useCallback(
+    fieldName => {
+      onEditComputedField(fieldName);
+      setSelectedItems([]);
+    },
+    [onEditComputedField],
+  );
+
   return (
     <Container onClick={onClearCheckedList}>
       {/* 拖动层组件 */}
@@ -108,7 +116,7 @@ export const ChartDraggableSourceGroupContainer: FC<{
               expression={item.expression}
               type={item.type}
               onDeleteComputedField={onDeleteComputedField}
-              onEditComputedField={onEditComputedField}
+              onEditComputedField={handleEditComputedField}
               onSelectionChange={onDataItemSelectionChange}
               onClearCheckedList={onClearCheckedList}
               isActive={selectedItemsIds.includes(item.id)}