From 8c8145974548568a68bb81720cabdafbefe545be Mon Sep 17 00:00:00 2001
From: Daniel <leezng@apache.org>
Date: Fri, 11 Nov 2022 17:08:55 +0800
Subject: [PATCH] [INLONG-6511][Dashboard] The Select/AutoComplete component in
 EditableTable will mistakenly change the value and cause re-rendering (#6512)

---
 .../src/components/EditableTable/index.tsx    | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/inlong-dashboard/src/components/EditableTable/index.tsx b/inlong-dashboard/src/components/EditableTable/index.tsx
index cadfa05edd2..f5961d6b8a7 100644
--- a/inlong-dashboard/src/components/EditableTable/index.tsx
+++ b/inlong-dashboard/src/components/EditableTable/index.tsx
@@ -20,6 +20,7 @@
 import React, { useEffect, useState } from 'react';
 import { AutoComplete, Button, Table, Input, InputNumber, Form } from 'antd';
 import { FormItemProps } from 'antd/lib/form';
+import { TableProps } from 'antd/lib/table';
 import { useTranslation } from 'react-i18next';
 import HighSelect from '@/components/HighSelect';
 import { useUpdateEffect } from '@/hooks';
@@ -51,12 +52,12 @@ export interface ColumnsItemProps {
   visible?: (val: unknown, rowVal: RowValueType) => boolean | boolean;
 }
 
-export interface EditableTableProps {
+export interface EditableTableProps
+  extends Omit<TableProps<any>, 'value' | 'onChange' | 'columns'> {
   // id comes from FormItem, like name
   id?: string;
   value?: RowValueType[];
   onChange?: (value: RowValueType[]) => void;
-  size?: string;
   columns: ColumnsItemProps[];
   // Can Edit(Can be changed to read-only)? Default: true.
   editing?: boolean;
@@ -102,7 +103,7 @@ const Comp = ({
   required = true,
   canDelete = true,
   canAdd = true,
-  size,
+  ...rest
 }: EditableTableProps) => {
   if (!id) {
     console.error(
@@ -243,15 +244,12 @@ const Comp = ({
         // Use div to wrap input, select, etc. so that the value and onChange events are not taken over by FormItem
         // So the actual value change must be changed by onChange itself and then exposed to the outer component
         <Form.Item
-          rules={
-            id
-              ? item.rules
-              : item.rules?.map(rule =>
-                  typeof rule === 'function' ? rule : { ...rule, transform: () => text ?? '' },
-                )
-          }
+          rules={item.rules?.map(rule =>
+            typeof rule === 'function' ? rule : { ...rule, transform: () => text ?? '' },
+          )}
           messageVariables={{ label: item.title }}
-          name={id ? [id, idx, item.dataIndex] : ['__proto__', 'editableRow', idx, item.dataIndex]}
+          // If the `name=[id, idx, item.dataIndex]` is used, the array value error will occur when the select/autocomplete input is entered, and the setValue will be automatically reset.
+          name={['__proto__', 'editableRow', idx, item.dataIndex]}
           className={styles.formItem}
         >
           <div>{formCompObj[item.type || 'input']}</div>
@@ -279,10 +277,10 @@ const Comp = ({
 
   return (
     <Table
+      {...rest}
       dataSource={data}
       columns={tableColumns}
       rowKey="_etid"
-      size={size as any}
       footer={
         editing && canAdd
           ? () => (