From ee0e161b09b0e7472ba3fe2db6efdc8b5d62c807 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Mon, 13 Jan 2025 18:43:25 +0100
Subject: [PATCH] fix(form): initialize arrays when receiving items (#2959)
 (CP: 24.6) (#3126)

fix(form): initialize arrays when receiving items (#2959)

* fix(form): initialize arrays when receiving items

Fixes #2949

* fix(lit-form): make it build

* test(lit-form): make linter happy

---------

Co-authored-by: Anton Platonov <platosha@gmail.com>
Co-authored-by: Vlad Rindevich <vladrin@vaadin.com>
Co-authored-by: Luciano Vernaschi <luciano@vaadin.com>
---
 packages/ts/lit-form/src/BinderNode.ts   |  2 +-
 packages/ts/lit-form/test/Binder.test.ts | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

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<M extends AbstractModel = AbstractModel> extends EventTa
   }
 
   set value(value: Value<M> | 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);