@homebound/form-state 2.2.5 → 2.2.9

package/dist/formState.js

@@ -180,7 +180,7 @@ function newObjectState(config, parentState, instance, key, onBlur) {
                 throw new Error(`${key || "formState"} is currently readOnly`);
             }
             getFields(this).forEach((field) => {
-                if (field.key in value && (!field.dirty || !field._focused)) {
+                if (field.key in value) {
                     field.set(value[field.key], opts);
                 }
             });
@@ -314,11 +314,8 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         },
         blur() {
             // Now that the user is done editing the field, we sneak in some trim logic
-            if (typeof this.value === "string") {
-                this.set(this.value.trim());
-                if (this.value === "") {
-                    this.set(undefined);
-                }
+            if (this._focused) {
+                this.maybeTrim();
             }
             this._focused = false;
             // touched is readonly, but we're allowed to change it
@@ -329,8 +326,10 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
                 throw new Error(`${key} is currently readOnly`);
             }
-            if (opts.refreshing && this.dirty) {
-                // Ignore refreshed values if we're already dirty
+            if (opts.refreshing && this.dirty && this.value !== value) {
+                // Ignore incoming values if we have changes (this.dirty) unless our latest change (this.value)
+                // matches the incoming value (value), b/c if it does we should accept it and reset originalValue
+                // so that we're not longer dirty.
                 return;
             }
             else if (computed && (opts.resetting || opts.refreshing)) {
@@ -349,6 +348,11 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             if (opts.refreshing) {
                 this.originalValue = newValue;
             }
+            // If we're being set programmatically, i.e. we don't currently have focus,
+            // call blur to trigger any auto-saves.
+            if (!this._focused) {
+                this.blur();
+            }
         },
         reset() {
             if (!computed) {
@@ -373,6 +377,17 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             _originalValue = v;
             _originalValueTick.value++;
         },
+        maybeTrim() {
+            if (typeof this.value === "string") {
+                let newValue = this.value.trim();
+                if (newValue === "") {
+                    newValue = undefined;
+                }
+                if (newValue !== this.value) {
+                    this.set(newValue);
+                }
+            }
+        },
     };
     return field;
 }
@@ -411,9 +426,18 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         // private
         hasNewItems() {
-            const currentList = this.value;
-            const a = (currentList || []).every((e) => (originalCopy || []).includes(e));
-            const b = (originalCopy || []).every((e) => (currentList || []).includes(e));
+            const [current, original] = [this.value || [], originalCopy || []];
+            // Instead of relying on just object identities, we look up each child's state
+            // in rowMap, because we already dedup/check object identity (i.e. look for id fields)
+            // when create object states.
+            const a = current.every((e) => {
+                const state = rowMap.get(e);
+                return original.some((e) => rowMap.get(e) === state);
+            });
+            const b = original.every((e) => {
+                const state = rowMap.get(e);
+                return current.some((e) => rowMap.get(e) === state);
+            });
             const isSame = a && b;
             return !isSame;
         },
@@ -496,6 +520,10 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
                 return childState.value;
             });
+            // Reset originalCopy so that our dirty checks have the right # of rows.
+            if (opts.refreshing) {
+                originalCopy = [...(parentInstance[key] || [])];
+            }
             _tick.value++;
         },
         add(value, spliceIndex) {
@@ -505,6 +533,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             this.ensureSet();
             this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
             _tick.value++;
+            onBlur();
         },
         remove(indexOrValue) {
             this.ensureSet();
@@ -518,6 +547,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 }
             }
             _tick.value++;
+            onBlur();
         },
         reset() {
             if (originalCopy) {
@@ -539,7 +569,10 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             _tick.value++;
         },
     };
-    return list;
+    return mobx_1.makeAutoObservable(list, {
+        // See other makeAutoObservable comment
+        value: mobx_1.computed({ equals: () => false }),
+    });
 }
 function isNotUndefined(value) {
     return value !== undefined;

package/dist/formState.test.js

@@ -117,6 +117,19 @@ describe("formState", () => {
         expect(state.books.rows[2].originalValue === b1).toEqual(true);
         expect(ticks).toEqual(3);
     });
+    it("list value can observe changes", () => {
+        const b1 = { title: "t1" };
+        const a1 = { firstName: "a1", books: [b1] };
+        const state = createAuthorInputState(a1);
+        let books;
+        let ticks = 0;
+        mobx_1.autorun(() => {
+            books = state.books.value;
+            ticks++;
+        });
+        state.books.add({ title: "t2" }, 0);
+        expect(ticks).toEqual(2);
+    });
     it("maintains unknown fields", () => {
         // Given the form is not directly editing id fields
         const config = {
@@ -321,6 +334,36 @@ describe("formState", () => {
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
     });
+    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("calls onBlur when programmatically setting a value", () => {
+        const onBlur = jest.fn();
+        // Given an author listening for blur
+        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        // When we programmatically set a field that isn't focused
+        a1.firstName.value = "first";
+        // Then we call onBlur
+        expect(onBlur).toBeCalledTimes(1);
+    });
+    it("defers calling onBlur when setting a bound value", () => {
+        const onBlur = jest.fn();
+        // Given an author listening for blur
+        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        // And the field is focused
+        a1.firstName.focus();
+        // When we we set the field
+        a1.firstName.value = "first";
+        // Then we don't call onBlur
+        expect(onBlur).toBeCalledTimes(0);
+    });
     it("knows list of primitives are dirty", () => {
         const a1 = formState_1.createObjectState({ favoriteColors: { type: "value" } }, {});
         expect(a1.favoriteColors.dirty).toBeFalsy();
@@ -921,7 +964,7 @@ describe("formState", () => {
         // And they have wip edits
         formState.firstName.set("ff");
         // When a mutation result sets both firstName and lastName
-        formState.set({ firstName: "f2", lastName: "l2" });
+        formState.set({ firstName: "f2", lastName: "l2" }, { refreshing: true });
         // Then we don't overwrite the user's WIP work
         expect(formState.firstName.value).toEqual("ff");
         expect(formState.lastName.value).toEqual("l2");
@@ -934,13 +977,14 @@ describe("formState", () => {
         // Given first name is focused, but has not changed
         formState.firstName.focus();
         // When a mutation result sets both firstName and lastName
-        formState.set({ firstName: "f2", lastName: "l2" });
+        formState.set({ firstName: "f2", lastName: "l2" }, { refreshing: true });
         // Then we do update the value
         expect(formState.firstName.value).toEqual("f2");
     });
     it("trims string values on blur", () => {
         const formState = formState_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with spaces
+        formState.firstName.focus();
         formState.firstName.set("f ");
         // And we initially keep the space
         expect(formState.firstName.value).toEqual("f ");
@@ -952,6 +996,7 @@ describe("formState", () => {
     it("trims empty values to undefined on blur", () => {
         const formState = formState_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with only spaces
+        formState.firstName.focus();
         formState.firstName.set(" ");
         // And we initially keep the space
         expect(formState.firstName.value).toEqual(" ");
@@ -1187,6 +1232,18 @@ describe("formState", () => {
                     { id: "b:3", title: "b3" },
                 ],
             };
+            // Eventually our local values are saved
+            const data3 = {
+                id: "a:1",
+                firstName: "local",
+                lastName: "l2",
+                address: { id: "address:1", street: "local", city: "c2" },
+                books: [
+                    { id: "b:1", title: "local" },
+                    { id: "b:2", title: "b2" },
+                    { id: "b:3", title: "b3" },
+                ],
+            };
             // And we start out with data1
             const [data, setData] = react_1.useState(data1);
             const form = formState_1.useFormState({ config, init: { input: data, map: (d) => d } });
@@ -1195,9 +1252,6 @@ describe("formState", () => {
                 form.address.street.value = "local";
                 form.books.rows[0].title.value = "local";
             }
-            function refreshData() {
-                setData(data2);
-            }
             return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
                         jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "lastName" }, { children: form.lastName.value }), void 0),
                         jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "street" }, { children: form.address.street.value }), void 0),
@@ -1206,7 +1260,8 @@ describe("formState", () => {
                         jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title2" }, { children: form.books.rows[1].title.value }), void 0),
                         jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "booksLength" }, { children: form.books.rows.length }), void 0),
                         jsx_runtime_1.jsx("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: refreshData }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "saveData", onClick: () => setData(data3) }, void 0),
                         jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "changedValue" }, { children: JSON.stringify(form.changedValue) }), void 0)] }, void 0)) }, void 0));
         }
         // And we start out with the initial query data
@@ -1243,6 +1298,12 @@ describe("formState", () => {
             books: [{ id: "b:1", title: "local" }, { id: "b:2" }, { id: "b:3" }],
             firstName: "local",
         });
+        // And then when our mutation results come back
+        rtl_utils_1.click(r.saveData);
+        // Then changedValue doesn't show our local changes anymore
+        expect(JSON.parse(r.changedValue().textContent)).toEqual({
+            id: "a:1",
+        });
     });
     it("useFormState can accept new data while read only", async () => {
         // Given a component
@@ -1322,8 +1383,8 @@ 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();
+    it("can trigger auto save for fields in list that were initially undefined", async () => {
+        const autoSave = jest.fn();
         // Given a component
         function TestComponent() {
             // When the data is initially undefined
@@ -1332,27 +1393,30 @@ describe("formState", () => {
             const form = formState_1.useFormState({
                 config: authorWithBooksConfig,
                 init: { input: data, map: (d) => d, ifUndefined: { books: [] } },
-                autoSave: () => onBlur(),
+                autoSave,
             });
             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));
+                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookOne", onClick: () => form.books.rows[0].title.blur() }, void 0),
+                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookTwo", 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);
+        rtl_utils_1.click(r.blurBookOne);
+        // Then we don't auto-save because nothing has changed
+        expect(autoSave).toBeCalledTimes(0);
         // And when adding a new book
         rtl_utils_1.click(r.add);
+        // We autoSave the new row right away (because we don't have any validation rules
+        // that say the new row can't be empty)
+        expect(autoSave).toBeCalledTimes(1);
         // And the new book is blurred
-        rtl_utils_1.click(r.blurNew);
-        // Then expect onBlur to be triggered again
-        expect(onBlur).toBeCalledTimes(2);
+        rtl_utils_1.click(r.blurBookTwo);
+        // Then we auto save again
+        expect(autoSave).toBeCalledTimes(2);
     });
 });
 class ObservableObject {
@@ -1386,8 +1450,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.5",
+  "version": "2.2.9",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",