@homebound/form-state 2.26.10 → 2.26.11

package/dist/fields/listField.js

@@ -208,6 +208,8 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
                 //
                 // Only do this if one of our client-side objects is missing an id
                 const incomingByHash = idKey && currentItems.some((item) => !item[idKey]) && (0, utils_1.groupBy)(incomingItems, hashWithoutId);
+                // Watch for deletions
+                const hasOpKey = Object.keys(listConfig.config).includes("op");
                 // First, process all current items
                 for (const currentItem of currentItems) {
                     const childState = rowMap.get(currentItem); // We'll always have a child state for `currentItems`
@@ -222,8 +224,13 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
                         addedRows.delete(currentItem);
                     }
                     else if (childState.dirty || addedRows.has(currentItem)) {
-                        // If no incoming, but we're dirty, keep the WIP change
-                        mergedItems.push(currentItem);
+                        // If no incoming, but we're dirty (...and not deleted), keep the WIP change
+                        if (hasOpKey && currentItem.op === "delete") {
+                            // delete
+                        }
+                        else {
+                            mergedItems.push(currentItem);
+                        }
                     }
                     else {
                         // Local is not dirty, and it's not upstream, so remove it

package/dist/formState.test.js

@@ -205,6 +205,59 @@ describe("formState", () => {
         // And we're not longer dirty
         expect(state.books.dirty).toBe(false);
     });
+    it("list value can refresh and not drop new children that are just data", () => {
+        const config = configBuilders_1.f.config({
+            firstName: configBuilders_1.f.value(),
+            tags: configBuilders_1.f.list({ combo: configBuilders_1.f.value() }),
+        });
+        const state = (0, objectField_1.createObjectState)(config, { firstName: "a1", tags: [] });
+        // And we add a new child on the client-side (and it doesn't have an id)
+        state.tags.add({ combo: ["b1", "b2"] });
+        // When we refresh it with the original list undefined
+        state.set({ tags: [] }, { refreshing: true });
+        // Then it keeps the new child
+        expect(state.tags.value).toEqual([{ combo: ["b1", "b2"] }]);
+        // And it's still considered changed
+        expect(state.tags.dirty).toBe(true);
+        expect(state.tags.originalValue).toEqual([]);
+        // And we add an additional child
+        state.tags.add({ combo: ["c1", "c2"] });
+        // And a refresh brings back the 1st child acked from the server
+        state.set({ tags: [{ combo: ["b1", "b2"] }] }, { refreshing: true });
+        // Then we still have 2 children
+        expect(state.tags.value).toEqual([{ combo: ["b1", "b2"] }, { combo: ["c1", "c2"] }]);
+        // And we're still dirty
+        expect(state.tags.dirty).toBe(true);
+        // When the server finally acks both children
+        state.set({ tags: [{ combo: ["b1", "b2"] }, { combo: ["c1", "c2"] }] }, { refreshing: true });
+        // Then we're finally clean
+        expect(state.tags.dirty).toBe(false);
+    });
+    it("list value can refresh and drop children that were deleted", () => {
+        // Given a list field that is currently populated
+        const a1 = {
+            id: "a:1",
+            firstName: "a1",
+            books: [
+                { id: "b:1", title: "b1", op: "include" },
+                { id: "b:2", title: "b2", op: "include" },
+            ],
+        };
+        // And incremental deletion is enabled
+        const config = configBuilders_1.f.config({
+            id: configBuilders_1.f.value(),
+            books: configBuilders_1.f.list({ id: configBuilders_1.f.value(), title: configBuilders_1.f.value(), op: configBuilders_1.f.value() }),
+        });
+        const state = (0, objectField_1.createObjectState)(config, a1);
+        // When we delete the 1st book
+        state.books.rows[0].op.set("delete");
+        // When we refresh it only the 2nd book
+        state.set({ books: [{ id: "b:2", title: "b2" }] }, { refreshing: true });
+        // Then we only have 1 book
+        expect(state.books.value).toEqual([{ id: "b:2", title: "b2", op: "include" }]);
+        // And we're not dirty
+        expect(state.books.dirty).toBe(false);
+    });
     it("list value can observe changes", () => {
         const b1 = { title: "t1" };
         const a1 = { firstName: "a1", books: [b1] };

package/package.json

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