@pagamio/frontend-commons-lib 0.8.352 → 0.8.353

package/lib/form-engine/FormEngine.js

@@ -47,31 +47,36 @@ const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNo
         }
         return initialValues;
     };
-    const { control, handleSubmit, watch, formState: { errors, isSubmitting }, reset, setValue, trigger, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
-    const allFields = watch();
-    const password = watch('password');
-    const confirmPassword = watch('confirmPassword');
-    //re-validate confirmPassword when password changes
+    const { control, handleSubmit, watch, formState: { errors, isSubmitting }, reset, setValue, trigger, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
+    // Subscribe to field changes via the callback form of `watch` so this
+    // component does NOT re-render on every keystroke / select change. The
+    // previous `const allFields = watch()` (no args) caused the entire
+    // FormEngine subtree — including all Radix Select popovers — to re-render
+    // synchronously inside the field's onChange. That race produced the
+    // "click twice to commit" symptom on Select inputs: the first click's
+    // outside-dismiss fired during the parent re-render and the popover lost
+    // its open state. Subscribing via callback keeps RHF state updates
+    // isolated to the affected Controller subtree.
     useEffect(() => {
-        if (password && confirmPassword) {
-            trigger('confirmPassword');
-        }
-    }, [password, trigger, confirmPassword]);
-    useEffect(() => {
-        if (getFieldValues) {
-            getFieldValues(allFields);
-        }
-    }, [allFields, getFieldValues]);
-    // Save form data when fields change (for persistence)
-    useEffect(() => {
-        if (persistenceKey && allFields && Object.keys(allFields).length > 0) {
-            // Only save if there are actual field values (not just empty object)
-            const hasValues = Object.values(allFields).some((value) => value !== undefined && value !== null && value !== '');
-            if (hasValues) {
-                saveFormData(allFields, true);
+        const subscription = watch((values, info) => {
+            if (info?.name === 'password') {
+                const cp = values?.confirmPassword;
+                if (values?.password && cp) {
+                    trigger('confirmPassword');
+                }
             }
-        }
-    }, [allFields, persistenceKey, saveFormData]);
+            if (getFieldValues) {
+                getFieldValues(values);
+            }
+            if (persistenceKey) {
+                const hasValues = Object.values(values ?? {}).some((value) => value !== undefined && value !== null && value !== '');
+                if (hasValues) {
+                    saveFormData(values, true);
+                }
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [watch, trigger, getFieldValues, persistenceKey, saveFormData]);
     // Expose form control methods via ref
     useEffect(() => {
         if (formRef && 'current' in formRef) {
@@ -109,11 +114,12 @@ const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNo
     const validateConfirmPassword = (value) => {
         if (!value)
             return 'Please confirm your password';
-        if (!password)
+        const currentPassword = getValues('password');
+        if (!currentPassword)
             return 'Please enter a password first';
-        if (password.length < 8)
+        if (currentPassword.length < 8)
             return 'Please enter a valid password first (minimum 8 characters)';
-        if (value !== password)
+        if (value !== currentPassword)
             return 'Passwords do not match';
         return true;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.352",
+  "version": "0.8.353",
   "publishConfig": {
     "access": "public",
     "provenance": false