@homebound/form-state 2.22.2 → 2.22.3

package/dist/fields/objectField.js

@@ -163,6 +163,8 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         get changedValue() {
             const result = {};
             getFields(this).forEach((f) => {
+                if (f._computed)
+                    return;
                 if (f.dirty ||
                     // If the caller used useFormState.ifUndefined to provide some default values, then those keys may not
                     // look dirty, but if we're new we should include them anyway.

package/dist/fields/valueField.js

@@ -18,6 +18,8 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         _readOnly: readOnly || false,
         _loading: false,
         _focused: false,
+        // Expose so computed can be skipped in changedValue
+        _computed: computed,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
         _isReadOnlyKey: isReadOnlyKey,
@@ -54,6 +56,12 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {
+            // Usually if we see a field being unset, we set `parent[key] = null`, but if we're wrapping
+            // a mobx observable object, it might have changed to `undefined` without us being able to
+            // tell it to be `null` (and potentially break the type contract of `string | undefined`).
+            // So detect un-set-ness here and return `null`.
+            if (this.value === undefined && this.originalValue !== undefined)
+                return null;
             return this.value;
         },
         get valid() {

package/dist/formState.test.js

@@ -979,11 +979,7 @@ describe("formState", () => {
     it("can observe observable objects being mutated directly", () => {
         // Given a mobx class with a computed
         const instance = new ObservableObject();
-        const formState = (0, objectField_1.createObjectState)({
-            firstName: { type: "value" },
-            lastName: { type: "value" },
-            fullName: { type: "value", computed: true },
-        }, instance);
+        const formState = (0, objectField_1.createObjectState)(authorWithFullName, instance);
         expect(formState.firstName.value).toEqual("first");
         expect(formState.fullName.value).toEqual("first last");
         // And we hook up reactivity to the computed
@@ -999,9 +995,11 @@ describe("formState", () => {
         expect(formState.fullName.value).toEqual("change last");
         // And when the underlying mobx class has a field unset
         instance.firstName = undefined;
-        // Then our fomr-state computed re-runs again
+        // Then our form-state computed re-runs again
         expect(numCalcs).toBe(3);
         expect(formState.fullName.value).toEqual("undefined last");
+        // And knows the field should be sent as null
+        expect(formState.changedValue).toEqual({ firstName: null });
     });
     it("can set computeds that have setters", () => {
         const formState = (0, objectField_1.createObjectState)({
@@ -1086,6 +1084,18 @@ describe("formState", () => {
         // because this might trigger creating a throw-away entity
         expect(formState.changedValue).toEqual({ firstName: "f" });
     });
+    it("changedValue skips computeds", () => {
+        // Given a new author that calls full name
+        const formState = (0, objectField_1.createObjectState)(authorWithFullName, new ObservableObject());
+        expect(formState.fullName.value).toEqual("first last");
+        // When the firstName changes
+        formState.firstName.value = "First";
+        // Then the fullName changes
+        expect(formState.fullName.value).toBe("First last");
+        expect(formState.fullName.dirty).toBe(true);
+        // And we don't include it in the changedValue
+        expect(formState.changedValue).toEqual({ firstName: "First" });
+    });
     it("can return only changed list fields", () => {
         // Given an author with some books
         const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
@@ -1579,6 +1589,11 @@ const authorWithBooksConfig = configBuilders_1.f.config({
 function createAuthorInputState(input, maybeAutoSave) {
     return (0, objectField_1.createObjectState)(authorWithBooksConfig, input, { maybeAutoSave });
 }
+const authorWithFullName = {
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+    fullName: { type: "value", computed: true },
+};
 const authorWithAddressConfig = {
     id: { type: "value" },
     firstName: { type: "value" },

package/package.json

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