fix: handle event instead of data in ObjectForm submission and add defensive checks

Author: hotlong

apps/console/src/__tests__/ObjectFormUnit.test.tsx

@@ -115,7 +115,10 @@ describe('ObjectForm Unit Tests', () => {
       // Fill in form
       await user.type(screen.getByLabelText(/Full Name/i), 'Test User');
       await user.type(screen.getByLabelText(/Email/i), 'test@example.com');
-
+      
+      // Debug DOM state
+      // console.log('DEBUG_DOM_HTML:', screen.getByLabelText(/Full Name/i).outerHTML);
+      
       // Submit
       const submitButton = screen.getByRole('button', { name: /create/i });
       await user.click(submitButton);

packages/components/src/renderers/form/form.tsx

@@ -77,7 +77,6 @@ ComponentRegistry.register('form',
 
     // Handle form submission
     const handleSubmit = form.handleSubmit(async (data) => {
-      console.log('Form Renderer handleSubmit data:', data);
       setIsSubmitting(true);
       setSubmitError(null);
 
@@ -93,7 +92,7 @@ ComponentRegistry.register('form',
       );
 
       if (isEvent) {
-        console.warn('Form Renderer: Received Event instead of data! Fetching values manually.');
+        // This should not happen with RHF handleSubmit, but just in case
         formData = form.getValues();
       } else if (!formData || Object.keys(formData).length === 0) {
         // Fallback: if data is empty check getValues(), in case RHF failed to pass it for some reason
@@ -172,11 +171,13 @@ ComponentRegistry.register('form',
       ? cn('grid gap-4', gridColsClass)
       : 'space-y-4';
 
-    // Extract designer-related props
+    // Extract designer-related props and conflicting handlers
     const { 
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
-        style, 
+        style,
+        onSubmit: _ignoredOnSubmit, // Prevent overwriting our handleSubmit
+        onChange: _ignoredOnChange, // Prevent overwriting our onChange
         ...formProps 
     } = props;
 

packages/plugin-form/src/ObjectForm.tsx

@@ -262,7 +262,19 @@ export const ObjectForm: React.FC<ObjectFormProps> = ({
   }, [objectSchema, schema.fields, schema.customFields, schema.readOnly, schema.mode, hasInlineFields]);
 
   // Handle form submission
-  const handleSubmit = useCallback(async (formData: any) => {
+  const handleSubmit = useCallback(async (formData: any, e?: any) => {
+    // If we receive an event as the first argument, it means the Form renderer passed the event instead of data
+    // This happens when react-hook-form's handleSubmit is bypassed or configured incorrectly
+    if (formData && (formData.nativeEvent || formData._reactName === 'onSubmit')) {
+      console.warn('ObjectForm: Received Event instead of data in handleSubmit! This suggests a Form renderer issue.');
+      // Proceed defensively - we can't do much if we don't have data, but let's try to not crash
+      // If we are here, formData is actually the event
+      if (e === undefined) {
+         e = formData;
+         formData = {}; // Reset to empty object or we try to submit the Event object
+      }
+    }
+
     console.log('ObjectForm submitting data:', formData);
     // For inline fields without a dataSource, just call the success callback
     if (hasInlineFields && !dataSource) {