[inlong] 05/05: [INLONG-6511][Dashboard] The Select/AutoComplete component in EditableTable will mistakenly change the value and cause re-rendering (#6512)

[do...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

dockerzhang pushed a commit to branch branch-1.4
in repository https://gitbox.apache.org/repos/asf/inlong.git

commit 8c8145974548568a68bb81720cabdafbefe545be
Author: Daniel <le...@apache.org>
AuthorDate: Fri Nov 11 17:08:55 2022 +0800

    [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 cadfa05ed..f5961d6b8 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
           ? () => (