diff --git a/packages/ts/lit-form/src/BinderNode.ts b/packages/ts/lit-form/src/BinderNode.ts index cc3776ebb1..94a8fc7cde 100644 --- a/packages/ts/lit-form/src/BinderNode.ts +++ b/packages/ts/lit-form/src/BinderNode.ts @@ -267,7 +267,7 @@ export class BinderNode extends EventTa } set value(value: Value | undefined) { - this.initializeValue(); + this.initializeValue(true); this.#setValueState(value, undefined); } diff --git a/packages/ts/lit-form/test/Binder.test.ts b/packages/ts/lit-form/test/Binder.test.ts index 7a9435c8b6..56c08896f2 100644 --- 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 () => { + const 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);