@homebound/form-state 2.22.4 → 2.22.5

package/dist/fields/listField.js

@@ -73,6 +73,9 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
         get dirty() {
             return this.rows.some((r) => r.dirty) || this.hasChanged();
         },
+        get focused() {
+            return this.rows.some((r) => r.focused);
+        },
         get required() {
             return this.rules.some((rule) => rule === rules_1.required);
         },

package/dist/fields/objectField.js

@@ -97,6 +97,9 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             const readOnlyField = getFields(this).find((f) => f._isReadOnlyKey);
             return !!(readOnlyField === null || readOnlyField === void 0 ? void 0 : readOnlyField.value);
         },
+        get focused() {
+            return getFields(this).some((f) => f.focused);
+        },
         get touched() {
             return getFields(this).some((f) => f.touched);
         },

package/dist/fields/valueField.d.ts

@@ -22,6 +22,7 @@ export interface FieldState<V> {
     readonly required: boolean;
     readonly dirty: boolean;
     readonly valid: boolean;
+    readonly focused: boolean;
     readonly isNewEntity: boolean;
     rules: Rule<V>[];
     readonly errors: string[];
@@ -69,6 +70,5 @@ export interface FieldStateInternal<T, V> extends FieldState<V> {
     _isIdKey: boolean;
     _isDeleteKey: boolean;
     _isReadOnlyKey: boolean;
-    _focused: boolean;
 }
 export declare function newValueFieldState<T, K extends keyof T>(parentCopy: T, parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;

package/dist/fields/valueField.js

@@ -17,9 +17,9 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         /** Current readOnly value. */
         _readOnly: readOnly || false,
         _loading: false,
-        _focused: false,
         // Expose so computed can be skipped in changedValue
         _computed: computed,
+        _focused: false,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
         _isReadOnlyKey: isReadOnlyKey,
@@ -35,6 +35,9 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         set value(v) {
             this.set(v);
         },
+        get focused() {
+            return this._focused;
+        },
         get dirty() {
             return !(0, utils_1.areEqual)(this.originalValue, this.value, strictOrder);
         },
@@ -167,6 +170,16 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
             }
         },
     };
+    // If we're wrapping a mobx observer, watching for external mutations, i.e. from callers not
+    // going through our FieldState.set/FieldState.value setters.
+    if ((0, mobx_1.isObservable)(parentInstance)) {
+        (0, mobx_1.reaction)(() => parentInstance[key], () => {
+            // Don't auto-save on maybe-external mutation if our field, or another other field (potentially a computed),
+            // is currently focused, because then it's probably just us doing the writes through `Bound...Field` components.
+            if (!parentState().focused)
+                maybeAutoSave();
+        });
+    }
     return field;
 }
 exports.newValueFieldState = newValueFieldState;

package/dist/useFormState.test.js

@@ -283,6 +283,32 @@ describe("useFormState", () => {
         expect(r.booksLength.textContent).toEqual("1");
         expect(r.booksDirty.textContent).toEqual("false");
     });
+    it("can trigger auto-save when underlying observable is changed", async () => {
+        // Given a component
+        // And it's using a class/mobx proxy as the basis for the data
+        class AuthorRow {
+            constructor(firstName) {
+                this.firstName = firstName;
+                (0, mobx_1.makeAutoObservable)(this);
+            }
+        }
+        const autoSave = jest.fn();
+        function TestComponent() {
+            // And the author starts out with f1
+            const author = (0, react_2.useMemo)(() => new AuthorRow("f1"), []);
+            const config = (0, react_2.useMemo)(() => ({ firstName: { type: "value" } }), []);
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a }, autoSave });
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "changeFirstName", onClick: () => (author.firstName = "f2") }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "clearFirstName", onClick: () => (author.firstName = undefined) })] }));
+        }
+        // When we change the underlying observable
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(autoSave).toBeCalledTimes(0);
+        await (0, rtl_utils_1.clickAndWait)(r.changeFirstName);
+        // Then auto save is triggered
+        expect(autoSave).toBeCalledTimes(1);
+        await (0, rtl_utils_1.clickAndWait)(r.clearFirstName);
+        expect(autoSave).toBeCalledTimes(2);
+    });
     it("can trigger auto save for fields in list that were initially undefined", async () => {
         const autoSave = jest.fn();
         // Given a component

package/package.json

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