Merge pull request #74 from 1Byte-Software/develop

Develop

Author: kenn3thx

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.12.3]
+
+### Fixed
+
+-   Sync antd form value by react hook form state.
+
 ## [1.12.2]
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.12.2",
+    "version": "1.12.3",
     "description": "A simple React UI library",
     "main": "dist/index.js",
     "module": "dist/index.js",

src/molecules/Form/FormItemControl.tsx

@@ -1,11 +1,4 @@
-import {
-    Children,
-    cloneElement,
-    isValidElement,
-    ReactElement,
-    ReactNode,
-    useEffect
-} from 'react';
+import { Children, cloneElement, isValidElement, ReactElement, ReactNode, useEffect } from 'react';
 import {
     Control,
     ControllerFieldState,
@@ -105,6 +98,15 @@ export const FormItemControl = <
         formState,
     };
 
+    // If other component sets different value prop name, sync RHF state to Antd form state
+    useEffect(() => {
+        if (!form) return;
+
+        if (field.value !== form.getFieldValue(name)) {
+            form.setFieldValue(name, field.value);
+        }
+    }, [field.value, name, form]);
+
     if (typeof children === 'function') {
         const renderFn = children as RenderProp<TFieldValues, TName>;
 
@@ -121,16 +123,6 @@ export const FormItemControl = <
         );
     }
 
-    // If other component sets different value prop name, sync RHF state to Antd form state
-    useEffect(() => {
-        if (!form) return;
-
-        if (field.value !== form.getFieldValue(name)) {
-            console.debug('set', { name, value: field.value });
-            form.setFieldValue(name, field.value);
-        }
-    }, [field.value, name, form]);
-
     return (
         <FormItem
             {...props}