fix: form performance (#2047)

* fix: form performance

* fix: refresh when the targetKeyValue change

---------

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/schema-component/antd/action/Action.tsx

@@ -162,7 +162,7 @@ export const Action: ComposedAction = observer(
       >
         {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
         {!popover && renderButton()}
-        {!popover && props.children}
+        {!popover && <div onClick={(e) => e.stopPropagation()}>{props.children}</div>}
       </ActionContextProvider>
     );
   },

packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx

@@ -14,17 +14,33 @@ export const AssociationFieldProvider = observer(
 
     const collectionField = useMemo(
       () => getCollectionJoinField(fieldSchema['x-collection-field']),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [fieldSchema['x-collection-field'], fieldSchema.name],
     );
     const isFileCollection = useMemo(
       () => getCollection(collectionField?.target)?.template === 'file',
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [fieldSchema['x-collection-field']],
     );
     const currentMode = useMemo(
       () => fieldSchema['x-component-props']?.mode || (isFileCollection ? 'FileManager' : 'Select'),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [fieldSchema['x-component-props']?.mode],
     );
 
+    const targetKeyValue = useMemo(() => {
+      if (!field.value) return '';
+      if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
+        return field.value[collectionField.targetKey] ?? '';
+      }
+      if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
+        if (Array.isArray(field.value)) {
+          return field.value.map((v) => v[collectionField.targetKey] ?? '').join(',');
+        }
+      }
+      return '';
+    }, [collectionField, field.value]);
+
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
@@ -67,7 +83,8 @@ export const AssociationFieldProvider = observer(
         }
       }
       setLoading(false);
-    }, [currentMode, collectionField, JSON.stringify(field.value)]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentMode, collectionField, targetKeyValue]);
 
     if (loading) {
       return null;

packages/core/client/src/schema-component/antd/association-field/Nester.tsx

@@ -46,7 +46,7 @@ const ToManyNester = observer(
             allowed = !value?.[options.targetKey];
           }
           return (
-            <>
+            <React.Fragment key={index}>
               <div style={{ textAlign: 'right' }}>
                 {field.editable && allowMultiple && (
                   <Tooltip key={'add'} title={t('Add new')}>
@@ -88,7 +88,7 @@ const ToManyNester = observer(
               </div>
               <RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
               <Divider />
-            </>
+            </React.Fragment>
           );
         })}
       </Card>