@homebound/form-state 2.2.2 → 2.2.6

package/README.md

@@ -4,6 +4,6 @@ Push release.
 
 # Todo
 
-* Add conditional readonly logic, like `{ type: "field", readOnlyIf: i => i.isInternal.value }`
+- Add conditional readonly logic, like `{ type: "field", readOnlyIf: i => i.isInternal.value }`
 
-* Add `omitFromValue` so we can have two fields, `book.author.id` / `book.author.name`, where `book.author.name` is used for showing the author name, but `book.author.id` is the only field that is submitted to the server on mutation (maybe pair this with `Ref` based mutations) 
+- Add `omitFromValue` so we can have two fields, `book.author.id` / `book.author.name`, where `book.author.name` is used for showing the author name, but `book.author.id` is the only field that is submitted to the server on mutation (maybe pair this with `Ref` based mutations)

package/dist/formState.js

@@ -42,8 +42,9 @@ function useFormState(opts) {
     // For this useMemo, we (almost) never re-run so that we can have a stable `form` identity across query refreshes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [config, ...(isWrappingMobxProxy ? dep : [])]);
-    // For this useMemo, we re-run any time input changes (could be a useEffect, but running immediately seems better)
-    react_1.useMemo(() => {
+    // We use useEffect so that any mutations to the proxies, which will call `setState`s on any observers to
+    // queue their components' render), don't happen during our render, per https://fb.me/setstate-in-render.
+    react_1.useEffect(() => {
         // Ignore the 1st run b/c our 1st useMemo already initialized `form` with the current `init` value.
         // Also for mobx proxies, we recreate a new form-state every time init changes, so that our
         // fields fundamentally pointing to the right proxy. So just defer to the ^ useMemo.
@@ -489,7 +490,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                         }
                     }
                     // If we didn't have an existing child, just make a new object state
-                    childState = createObjectState(config, value);
+                    childState = createObjectState(config, value, { onBlur });
                     rowMap.set(value, childState);
                 }
                 // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
@@ -499,11 +500,12 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         add(value, spliceIndex) {
             // This is called by the user, so value should be a non-proxy value we should keep
-            const childState = createObjectState(config, value);
+            const childState = createObjectState(config, value, { onBlur });
             rowMap.set(value, childState);
             this.ensureSet();
             this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
             _tick.value++;
+            onBlur();
         },
         remove(indexOrValue) {
             this.ensureSet();
@@ -517,6 +519,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 }
             }
             _tick.value++;
+            onBlur();
         },
         reset() {
             if (originalCopy) {

package/dist/formState.test.js

@@ -321,6 +321,16 @@ describe("formState", () => {
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
     });
+    it("it calls onBlur when adding or removing to a list", () => {
+        const onBlur = jest.fn();
+        const a1 = createAuthorInputState({ books: [] }, onBlur);
+        expect(a1.books.dirty).toBeFalsy();
+        a1.books.add({ title: "t2" });
+        expect(a1.books.dirty).toBeTruthy();
+        a1.books.remove(0);
+        expect(a1.dirty).toBeFalsy();
+        expect(onBlur).toBeCalledTimes(2);
+    });
     it("knows list of primitives are dirty", () => {
         const a1 = formState_1.createObjectState({ favoriteColors: { type: "value" } }, {});
         expect(a1.favoriteColors.dirty).toBeFalsy();
@@ -1322,6 +1332,38 @@ describe("formState", () => {
         expect(r.firstName().textContent).toEqual("f2");
         expect(r.fullName().textContent).toEqual("f2 l2");
     });
+    it("can trigger onBlur for fields in list that were initially undefined", async () => {
+        const onBlur = jest.fn();
+        // Given a component
+        function TestComponent() {
+            // When the data is initially undefined
+            const [data, setData] = react_1.useState();
+            const data2 = { books: [{ title: "Title 1" }] };
+            const form = formState_1.useFormState({
+                config: authorWithBooksConfig,
+                init: { input: data, map: (d) => d, ifUndefined: { books: [] } },
+                autoSave: () => onBlur(),
+            });
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "add", onClick: () => form.books.add({ title: "New Book" }) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "blur", onClick: () => form.books.rows[0].title.blur() }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "blurNew", onClick: () => form.books.rows[1].title.blur() }, void 0)] }, void 0)) }, void 0));
+        }
+        // Given a formState with `onBlur` set
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // When the data/child is now available
+        rtl_utils_1.click(r.refreshData);
+        // And the field is blurred
+        rtl_utils_1.click(r.blur);
+        // Then expect onBlur to triggered
+        expect(onBlur).toBeCalledTimes(1);
+        // And when adding a new book
+        rtl_utils_1.click(r.add);
+        // And the new book is blurred
+        rtl_utils_1.click(r.blurNew);
+        // Then expect onBlur to be triggered again
+        expect(onBlur).toBeCalledTimes(3);
+    });
 });
 class ObservableObject {
     constructor() {
@@ -1354,8 +1396,8 @@ const authorWithBooksConfig = {
         },
     },
 };
-function createAuthorInputState(input) {
-    return formState_1.createObjectState(authorWithBooksConfig, input);
+function createAuthorInputState(input, onBlur) {
+    return formState_1.createObjectState(authorWithBooksConfig, input, { onBlur });
 }
 const authorWithAddressConfig = {
     id: { type: "value" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.2.2",
+  "version": "2.2.6",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",