@homebound/form-state 2.2.8 → 2.2.9

package/dist/formState.js

@@ -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
@@ -351,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) {
@@ -375,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;
 }
@@ -556,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,7 +334,7 @@ describe("formState", () => {
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
     });
-    it("it calls onBlur when adding or removing to a list", () => {
+    it("calls onBlur when adding or removing to a list", () => {
         const onBlur = jest.fn();
         const a1 = createAuthorInputState({ books: [] }, onBlur);
         expect(a1.books.dirty).toBeFalsy();
@@ -331,6 +344,26 @@ describe("formState", () => {
         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();
@@ -951,6 +984,7 @@ describe("formState", () => {
     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 ");
@@ -962,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(" ");

package/package.json

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