@homebound/form-state 2.15.3 → 2.15.4

package/dist/fields/valueField.js

@@ -101,7 +101,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             }
             // If the user has deleted/emptied a value that was originally set, keep it as `null`
             // so that our partial update to the backend correctly unsets it.
-            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value);
+            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value) && !opts.refreshing;
             // If a list of primitives was originally undefined, coerce `[]` to `undefined`
             const coerceEmptyList = value && value instanceof Array && value.length === 0 && utils_1.isEmpty(this.originalValue);
             const newValue = keepNull ? null : utils_1.isEmpty(value) || coerceEmptyList ? undefined : value;
@@ -135,7 +135,9 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         },
         get originalValue() {
             // A dummy check to for reactivity around our non-proxy value
-            return _originalValueTick.value > -1 ? _originalValue : _originalValue;
+            const value = _originalValueTick.value > -1 ? _originalValue : _originalValue;
+            // Re-create the `keepNull` logic so that `.value` === `.originalValue`
+            return value === null ? undefined : value;
         },
         set originalValue(v) {
             _originalValue = v;

package/dist/useFormState.js

@@ -91,6 +91,12 @@ function useFormState(opts) {
             return;
         }
         setLoading(form, opts);
+        // Note: maybe someday we want to watch the `id` value and notice if it's changing (i.e. 2 -> 3),
+        // and treat this more as a reset than a refresh, b/c the id changing means it's probably
+        // not "the cache refreshed after a mutation save" but "the cache changed b/c of changing
+        // rows in the table that our side panel's form has open/is focused on" (which ideally would
+        // be treated as a full component remount by having an `key` field somewhere in the parent
+        // component, but it's unlikely the user will always remember to do this).
         form.set(utils_1.initValue(config, init), { refreshing: true });
     }, [form, ...dep]);
     // Use useEffect so that we don't touch the form.init proxy during a render

package/dist/useFormState.test.js

@@ -528,6 +528,41 @@ describe("useFormState", () => {
         expect(result.current.autoSave.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
         jest.clearAllTimers();
     });
+    it("treats the id changing as a whole new entity instead of a delete", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent() {
+            // Given an initial author a1
+            const [author, setAuthor] = react_2.useState({ id: "a:1", firstName: "a1" });
+            const form = useFormState_1.useFormState({ config, init: { input: author, map: (a) => a } });
+            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": "value" }, { children: String(form.firstName.value) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "dirty" }, { children: String(form.firstName.dirty) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "originalValue" }, { children: String(form.firstName.originalValue) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "objectValue" }, { children: String(form.value.firstName) }), void 0),
+                        jsx_runtime_1.jsx("div", { "data-testid": "a1", onClick: () => setAuthor({ id: "a:1", firstName: "a1" }) }, void 0),
+                        jsx_runtime_1.jsx("div", { "data-testid": "a2", onClick: () => setAuthor({ id: "a:2", firstName: undefined }) }, void 0)] }, void 0)) }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // And the value is initially a1/and not dirty
+        expect(r.value()).toHaveTextContent("a1");
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("a1");
+        expect(r.objectValue()).toHaveTextContent("a1");
+        // When we switch to a completely separate author
+        rtl_utils_1.click(r.a2);
+        // Then it switches to the next author
+        expect(r.value()).toHaveTextContent("undefined");
+        // And the field is not dirty (which had been the case before this bug fix)
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("undefined");
+        expect(r.objectValue()).toHaveTextContent("undefined");
+        // And when we switch back to the original author
+        rtl_utils_1.click(r.a1);
+        // It again restores the value and does not think an edit was WIP
+        expect(r.value()).toHaveTextContent("a1");
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("a1");
+        expect(r.objectValue()).toHaveTextContent("a1");
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/dist/utils.d.ts

@@ -35,7 +35,7 @@ export declare function isEmpty(value: any): boolean;
  *
  * - "plain" objects that have no custom prototype/i.e. are object literals
  * - objects that implement `toJSON`
- *
+ * - arrays
  */
 export declare function areEqual<T>(a?: T, b?: T, strictOrder?: boolean): boolean;
 export declare function hasToJSON(o?: unknown): o is {

package/dist/utils.js

@@ -100,7 +100,7 @@ exports.isEmpty = isEmpty;
  *
  * - "plain" objects that have no custom prototype/i.e. are object literals
  * - objects that implement `toJSON`
- *
+ * - arrays
  */
 function areEqual(a, b, strictOrder) {
     if (is_plain_object_1.isPlainObject(a)) {
@@ -117,7 +117,7 @@ function areEqual(a, b, strictOrder) {
         }
         if (a.length !== b.length)
             return false;
-        return a.every((a1) => b.some((b1) => fast_deep_equal_1.default(a1, b1)));
+        return a.every((a1) => b.some((b1) => areEqual(a1, b1)));
     }
     return a === b;
 }

package/package.json

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