fix(form): initialize arrays when receiving items

Fixes #2949
vaadin · Dec 5, 2024 · 5355b86 · 5355b86
1 parent cbd0e07
commit 5355b86
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/ts/lit-form/src/BinderNode.ts b/packages/ts/lit-form/src/BinderNode.ts
@@ -267,7 +267,7 @@ export class BinderNode<M extends AbstractModel = AbstractModel> extends EventTa
   }
 
   set value(value: Value<M> | undefined) {
-    this.initializeValue();
+    this.initializeValue(true);
     this.#setValueState(value, undefined);
   }
 
@@ -500,7 +500,7 @@ export class BinderNode<M extends AbstractModel = AbstractModel> extends EventTa
       : undefined;
 
     const defaultValue: Value<M> | undefined = this.parent
-      ? (this.parent.defaultValue as { readonly [key in typeof key]: Value<M> })[this.model[_key]]
+      ? (this.parent.defaultValue as { readonly [key in typeof key]: Value<M> } | undefined)[this.model[_key]]
       : undefined;
 
     if (value === undefined) {

diff --git a/packages/ts/lit-form/test/Binder.test.ts b/packages/ts/lit-form/test/Binder.test.ts
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 // API to test
-import { Binder, type BinderConfiguration } from '../src/index.js';
+import { Binder, type BinderConfiguration, m } from '../src/index.js';
 import {
   type Employee,
   EmployeeModel,
@@ -302,6 +302,21 @@ describe('@vaadin/hilla-lit-form', () => {
         assert.isTrue('supervisor' in binder.value);
       });
 
+      it('should support optional array', async () => {
+        let arrayBinderNode = binder.for(binder.model.colleagues);
+        assert.isUndefined(arrayBinderNode.value);
+        assert.isUndefined(arrayBinderNode.defaultValue);
+
+        arrayBinderNode.value = [EmployeeModel.createEmptyValue()];
+        const [itemModel] = m.items(arrayBinderNode.model);
+        assert.deepEqual(binder.for(itemModel).value, expectedEmptyEmployee);
+        assert.deepEqual(arrayBinderNode.defaultValue, []);
+        assert.isTrue(arrayBinderNode.dirty);
+
+        await binder.validate();
+        assert.isFalse(binder.invalid);
+      });
+
       it('should initialize parent optional on child binderNode access', () => {
         binder.for(binder.model.supervisor.supervisor);