fixed issue where form fields values would not be initialized until a…

…fter the first render
daniel3830 · Jan 9, 2023 · b9de616 · b9de616
1 parent 22a7892
commit b9de616
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 4.38.0 (January 9th, 2023)
+
+### Fixed
+
+- Issue where form fields values would not be initialized until after the first render.
+
 ## 4.38.0 (Dec 28th, 2022)
 
 ### Added

diff --git a/src/FormController.js b/src/FormController.js
@@ -844,7 +844,8 @@ export class FormController {
     }
   }
 
-  initialize(name, meta) {
+  // Third parameter is to prevent any form renders when it first gets initialized
+  initialize(name, meta, emit = true) {
     debug('Initialize', name, this.state);
     // Initialize value if needed
     // If we already have value i.e "saved"
@@ -907,10 +908,10 @@ export class FormController {
       this.debouncedGatherInfo(name);
     }
 
-    this.emit('field', name);
+    if (emit) this.emit('field', name);
 
     // Special event when fields value changes ( this if first time so its technically a change to initial value)
-    this.emit('field-value', name);
+    if (emit) this.emit('field-value', name);
     // Specifically did NOT call field-modified here
   }
 

diff --git a/src/hooks/useField.js b/src/hooks/useField.js
@@ -143,11 +143,9 @@ export const useField = ({
     userInitialValue ?? formController.getInitialValue(name) ?? defaultValue;
 
   // Grab the initial value
-  const [initialValue] = useState(() => getInitialValue());
-
-  // Hook onto the field state
-  // Note: we already scoped above so we pass false here
-  const fieldState = useFieldState(name, false);
+  const [initialValue] = useState(() => {
+    return getInitialValue();
+  });
 
   // Hook onto the field api
   // Note: we already scoped above so we pass false here
@@ -174,14 +172,6 @@ export const useField = ({
   // Create Id for field
   const [fieldId] = useState(() => id || uuidv4());
 
-  // Setup cursor position tracking
-  const { setCursor, setCursorOffset } = useCursorPosition({
-    value: fieldState.value,
-    inputRef: ref,
-    maintainCursor,
-    inputRefs
-  });
-
   // Generate validation function
   const validate = useMemo(
     () =>
@@ -220,8 +210,6 @@ export const useField = ({
     parser,
     clean,
     mask,
-    setCursorOffset,
-    setCursor,
     validate,
     yupSchema,
     validateOn: validateOn ?? 'blur',
@@ -241,6 +229,30 @@ export const useField = ({
   const metaRef = useRef(meta);
   metaRef.current = meta;
 
+  // Before we hook into field state initialize the field
+  useState(() => {
+    const metaInfo = metaRef.current;
+    logger('Initialize', metaInfo.name);
+    formController.initialize(metaInfo.name, metaRef, false);
+  });
+
+  // Hook onto the field state
+  // Note: we already scoped above so we pass false here
+  // Note: its important this call is here ( below where we call initialize ) so the state can be set up before we start using it
+  const fieldState = useFieldState(name, false);
+
+  // Setup cursor position tracking
+  const { setCursor, setCursorOffset } = useCursorPosition({
+    value: fieldState.value,
+    inputRef: ref,
+    maintainCursor,
+    inputRefs
+  });
+
+  // Add to meta
+  metaRef.current.setCursorOffset = setCursorOffset;
+  metaRef.current.setCursor = setCursor;
+
   // Register
   useEffect(
     () => {
@@ -254,12 +266,6 @@ export const useField = ({
     [name]
   );
 
-  // Initialize
-  // useEffect(() => {
-  //   formController.initialize(name, metaRef);
-  //   logger('Initialize', name);
-  // }, []);
-
   // Cleanup on irrelivant
   useEffect(
     () => {