fixed issue where resetting array field with no values would never se…

…t to new initial values

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.60.3 ( June 24th, 2024)
+
+### Fixed
+
+- Issue where resetting array field with no values would never set to new initial values
+
 ## 4.60.2 ( May 30th, 2024)
 
 ### Fixed

src/hooks/useArrayField.js

@@ -170,6 +170,20 @@ export const useArrayField = ({
     setInitialValues(initVals);
     // Clear out keys ( we wait until all fields have deregistered before resetting )
     setKeys([]);
+
+    // ---vv Special case when there are no fields so we do it right away vv---
+    if (!fieldsMap.size && resetRef.current) {
+      // V important we flag that we are done performing reset as all fields have deregistered
+      resetRef.current = false;
+      // For debug logging we show when complete
+      logger(`------------ ${name} Array Field Reset End ------------`);
+      const initVals = getInitialValues();
+      // Build a new set of keys because everything is new !!!
+      const resetKeys = initVals ? initVals.map(() => uuidv4()) : [];
+      // Finally set that shit !
+      setKeys(resetKeys);
+    }
+    // ---^^ Special case when there are no fields so we do it right away ^^---
   };
 
   const clear = () => {

vitedocs/Nav/ExamplesNav.jsx

@@ -56,6 +56,9 @@ export const ExamplesNav = () => {
       <NavLink href="/examples/change-initial-values">
         Change Initial Values
       </NavLink>
+      <NavLink href="/examples/array-change-initial-values">
+        Change Initial Values Array Field
+      </NavLink>
       <NavLink href="/examples/initialize-if-pristine">
         Initialize Value If Pristine
       </NavLink>

vitedocs/Pages/Examples/Gotchas/ChangeInitialValuesArrayField/ChangeInitialValuesArrayField.jsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import Example from './Example';
+import exampleCode from './Example.jsx?raw';
+import Code from '../../../../YourComponents/Code';
+import { SideBySide } from '../../../../SideBySide';
+import { Info } from '../../../../Info';
+
+export default function ChangeInitialValuesArrayField() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <>
+      <h1>
+        <code>Changing initialValues in Array Fields</code>
+      </h1>
+      <Info>
+        Commonly you will have use cases where you want the values to change
+        when the users has made a different selection.
+        <br />
+        Below we have example where there is a profile editor.
+        <br />
+        Depending on which profile you would like to edit, you want to pre
+        populate the profile form with that users profile information.
+      </Info>
+
+      <SideBySide
+        leftHeader={<h3>Example:</h3>}
+        rightHeader={<h3>Code:</h3>}
+        left={<Example />}
+        right={<Code links input1={exampleCode} />}
+      />
+      <br />
+      <br />
+    </>
+  );
+}

vitedocs/Pages/Examples/Gotchas/ChangeInitialValuesArrayField/Example.jsx

@@ -0,0 +1,92 @@
+import { Input, Debug, Select, ArrayField } from 'informed';
+import { Form, Button } from 'YourComponents';
+import React, { useState, useEffect, useRef } from 'react';
+
+const profiles = [
+  {
+    name: 'Bob',
+    age: 25
+  },
+  {
+    name: 'Kimbal',
+    age: 47,
+    friends: [{ name: 'Bill' }, { name: 'Bob' }]
+  },
+  {
+    name: 'Elon',
+    age: 48,
+    friends: [{ name: 'Shiban' }, { name: 'Talula' }]
+  }
+];
+
+const ProfileForm = ({ profile: initialValues }) => {
+  // Ref to the form api
+  const formApiRef = useRef();
+
+  // Reset the form whenever initial values change ( happens when user selects profile )
+  useEffect(
+    () => {
+      formApiRef.current.reset();
+    },
+    [initialValues]
+  );
+
+  return (
+    // Remember to get access to the formApi and pass in the initial values
+    <Form formApiRef={formApiRef} initialValues={initialValues}>
+      <Input name="name" label="First Name" />
+      <Input type="number" name="age" label="Age" />
+      <ArrayField name="friends">
+        {({ add }) => {
+          return (
+            <>
+              <Button
+                onClick={add}
+                type="button"
+                variant="accent"
+                style="outline">
+                Add
+              </Button>
+              <ArrayField.Items>
+                {({ remove, name }) => (
+                  <>
+                    <h4>{name}</h4>
+                    <Input name="name" label="Name" required />
+                    <Button type="button" onClick={remove} variant="negative">
+                      Remove
+                    </Button>
+                  </>
+                )}
+              </ArrayField.Items>
+            </>
+          );
+        }}
+      </ArrayField>
+      <Button type="submit">submit</Button>
+      <Debug values />
+    </Form>
+  );
+};
+
+export default function Profiles() {
+  // Select the first profile by default
+  const [selectedProfile, setSelectedProfile] = useState(profiles[0]);
+
+  const selectProfile = ({ value }) => setSelectedProfile(profiles[value]);
+
+  return (
+    <React.Fragment>
+      <h2>Select Profile</h2>
+      <Form>
+        {/* A rare case where we want to track the value instead of rcf ( onChange ) */}
+        <Select name="profile" label="Profile" onChange={selectProfile}>
+          {profiles.map((profile, i) => (
+            <option value={i}>{profile.name}</option>
+          ))}
+        </Select>
+      </Form>
+      <h2>Edit {selectedProfile.name}</h2>
+      <ProfileForm profile={selectedProfile} />
+    </React.Fragment>
+  );
+}

vitedocs/Routes/Routes.jsx

@@ -93,6 +93,7 @@ import { AsyncOptions } from '../Pages/ApiReference/AsyncOptions/AsyncOptions';
 import AfterRenderBug from '../Pages/Examples/AfterRenderBug/AfterRenderBug';
 import AfterRenderBugArray from '../Pages/Examples/AfterRenderBugArray/AfterRenderBugArray';
 import NestedArrayField from '../Pages/ApiReference/Arrays/NestedArrrayField/NestedArrrayField';
+import ChangeInitialValuesArrayField from '../Pages/Examples/Gotchas/ChangeInitialValuesArrayField/ChangeInitialValuesArrayField';
 
 const RootRoute = () => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -259,6 +260,10 @@ export const Routes = () => {
         <Route path="excel-sheet" element={<ExcelSheet />} />
         <Route path="initial-vs-default" element={<InitialVsDefault />} />
         <Route path="change-initial-values" element={<ChangeInitialValues />} />
+        <Route
+          path="array-change-initial-values"
+          element={<ChangeInitialValuesArrayField />}
+        />
         <Route
           path="initialize-if-pristine"
           element={<InitializeIfPristine />}