@homebound/form-state 2.30.0 → 2.30.1

package/dist/fields/valueField.js

@@ -127,7 +127,10 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
                 //   is exactly acking our change, or
                 // - the user hasn't made any changes since `.changedValue` was put on the wire, i.e. the
                 //   server received our value, but wanted to change it.
-                const keepLocalWipChange = this.value !== value && !isAckingUnset && !acceptServerAck;
+                // Compare by content (not `!==`) so array/list-of-primitive values are treated as acked when
+                // the server returns the same contents in a new array instance (otherwise the field would
+                // stay dirty forever, since reference equality never holds for a fresh array).
+                const keepLocalWipChange = !(0, utils_1.areEqual)(this.value, value, strictOrder) && !isAckingUnset && !acceptServerAck;
                 if (keepLocalWipChange)
                     return;
             }

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export { type ListFieldState } from "./fields/listField";
 export { createObjectState, type Fragment, type ObjectState, fragment } from "./fields/objectField";
 export { type FieldState, type ValueAdapter } from "./fields/valueField";
 export { required, type Rule } from "./rules";
-export { useFormState } from "./useFormState";
+export { type FormObjectState, useFormState } from "./useFormState";
 export { useFormStates } from "./useFormStates";
 export { type ObjectConfig } from "./config";

package/dist/useFormState.test.js

@@ -286,6 +286,28 @@ describe("useFormState", () => {
             return { firstName: input.legalFirstName, lastName: input.legalLastName };
         }
     });
+    it("becomes clean when update acks an array value with the same contents", async () => {
+        const config = { colors: { type: "value" } };
+        function TestComponent() {
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: { colors: ["red", "green", "blue"] } } });
+            // Note: we deliberately do not read `form.changedValue` (the way an auto-save would), so the only
+            // thing that can let `update` accept the server value is content equality, not the changedValue hint.
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "colors", children: ((_a = form.colors.value) !== null && _a !== void 0 ? _a : []).join(",") }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.dirty) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "edit", onClick: () => form.colors.set(["red", "green"]) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveAndUpdate", onClick: () => form.update({ colors: ["red", "green"] }) })] }));
+                } }));
+        }
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.dirty.textContent).toEqual("false");
+        // When the user edits the array
+        (0, rtl_utils_1.click)(r.edit);
+        expect(r.dirty.textContent).toEqual("true");
+        // And the server acks the same contents in a brand-new array instance
+        (0, rtl_utils_1.click)(r.saveAndUpdate);
+        // Then the form is clean (we don't get stuck dirty on array reference inequality)
+        expect(r.colors.textContent).toEqual("red,green");
+        expect(r.dirty.textContent).toEqual("false");
+    });
     it("can accept new data while read only", async () => {
         // Given a component
         function TestComponent() {

package/package.json

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